Custom Form Validation

Okay this might be a bit off topic but here it goes.

One of the forms I'm currently working on I need to some conditional validation of certain fields. The form has a drop down box and several fields after it. If anything is selected in the drop down box I want the fields following it to be required.If nothing has been selected in the drop down then those fields are not required.

I've never tried writing my own javascript so I'm having a hard time figuring this out most examples I've found have very simple validation and don't get into any depth.

Sean

Hi Sean,

I'm really not completely familiar with the LiveValidation but IIRC it's possible to do this by using JavaScript to change the class of the input. Basically here, you'd add class='required' if anything is selected.

Assuming that you have MooTools loaded you can use the addClass and removeClass methods to manage this

$('input_id').addClass('required');
$('input_id').removeClass('required');

Bob

Thanks for the lead Bob I found a good site for testing MooTools validation out. http://mooshell.net

I figured out how to use moo tools to do the switch the class but it doesn't seem to work with the validation in chronoforms

Here's the HTML code

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: ;">Click Me to Edit</label>
    <select class="cf_inputbox" id="select_0" size="1" title=""  name="select_0">
    <option value="">Choose Option</option>
      <option value="option 1">option 1</option>
<option value="option 2">option 2</option>

    </select>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Text 1</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="text_1" name="text_1" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Text 2</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="text_2" name="text_2" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_3" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

The JavaScript code

window.addEvent('domready',function(){ 
     
$('select_0').addEvent('change',function(){
	switch(this.value){
		case 'option 1': doOne(); break;
		case 'option 2': doTwo(); break;
	}
});

var doOne = function(){
	$('text_1').addClass('required');
	$('text_2').removeClass('required');
}

var doTwo = function(){
	$('text_2').addClass('required');
	$('text_1').addClass('required');
}

}); 

At one point I added this css to make sure it was running

input.required {
    border: solid 2px red
}

Then removed it. Chronoforms doesn't want to accept those fields are required once an option is choosen. Maybe I'm missing something simple.....

Sean

I'm having the same problem. The CSS works and changes fields to red, but the fields do not become 'required'. Have I not switched on something in form set-up?

Hi lchessar,

Please post a link to the form if it is on-line. Typically this is a sign of a JavaScript conflict.

Bob

http://www.scottishrugby.org/jsc/index.php?option=com_chronocontact&chronoformname=test

Hi lchessar,

There doesn't seem to be any validation set for the input fields.

<input id="text_1" class="cf_inputbox" type="text" name="text_1" title="" size="30" maxlength="150"/>

I'd expect to see - for example class="cf_inputbox required"Please check that you have validation set to 'On' in the Validation tab (I'm pretty sure that you do).

There are three ways to specify validation (a) by setting it in the Form Wizard (or Wizard Edit) when the form is created and clicking Apply; (b) by adding field names to the Validation tab; or (c) by adding the classes directly to the FormHTML.

Bob

Yes - but shouldn't the javascript do this for me, depending on the value I select in the drop-down?

window.addEvent('domready',function(){

$('total').addEvent('change',function(){
switch(this.value){
case 'one': doOne(); break;
case 'two': doTwo(); break;
}
});

var doOne = function(){
$('text_1').addClass('required');
$('text_2').addClass('required');
}

var doTwo = function(){
$('text_2').removeClass('required');
$('text_1').removeClass('required');
}

});

Hi lchessar,

Sorry, I didn't read far enough back to see that . . . I'll look again.

Bob

Hi lchessar,

It looks as though the LiveValidation isn't picking up the fields at all. Please will you try making both fields required in the ChronoForm setup then add the two extra lines to the script to 'unrequire' them on page load

window.addEvent('domready',function(){

// add these two lines
$('text_2').removeClass('required');
$('text_1').removeClass('required');

$('total').addEvent('change',function(){
switch(this.value){
case 'one': doOne(); break;
case 'two': doTwo(); break;
}
});

var doOne = function(){
$('text_1').addClass('required');
$('text_2').addClass('required');
}

var doTwo = function(){
$('text_2').removeClass('required');
$('text_1').removeClass('required');
}

});

Bob

Hi Bob,

Thanks for that. But this hasn't worked either. They don't become unrequired at all.

Hi lchessar,

Bother - please will you take a Form Backup using the icon in the Forms Manager toolbar and psot it here - you'll need to zip it or rename it to a .txt file to post it.

Bob

Hi Bob,

Here it is. 'Test' form is just the first step for me attempting to amend this other form http://www.scottishrugby.org/jsc/index.php?option=com_chronocontact&chronoformname=jscmembers&Itemid=2 so that the radio buttons for 1,2,3,4 in turn make the second, third and fourth member fields editable and mandatory. I want the page to start with only the first member fields editable and mandatory. (second, third and fourth greyed out)

Seem to be stuck at the first hurdle though....

Hi lchessar,

I removed the code from the JavaScript box and put it into the beginning of the Form HTML box instead. That way it's loaded into the page header and executes correctly. I've changed your functions a little to disable box two when 1 member is selected - more to demonstrate that it works than anything else.

<?php
$script = "";
$script .= "
window.addEvent('domready',function(){ 

$('text_1').removeClass('required');
$('text_2').removeClass('required');

$('total').addEvent('change', function(){
   switch(this.value){
      case 'one': doOne(); break;
      case 'two': doTwo(); break;
   }
});

var doOne = function(){
   $('text_1').addClass('required');
   $('text_2').removeClass('required');
   $('text_2').disabled = true;
}

var doTwo = function(){
   $('text_1').addClass('required');
   $('text_2').disabled = false;
   $('text_2').addClass('required');
}

});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<div class="form_item">
. . .

Bob

Bob,

Thanks very much for spending your time on this. No matter what we want to do, chronoforms always works, eventually!

Well I finally got back to working on this form (this is a secondary part of my job) I've written some PHP code to use the custom validation option. It's 95% works. On my one aircraft types it keeps insisting that it requires starts despite the fact that it shouldn't even be looking for starts.

Here's my validation code:

<?php

########### Check if an aircraft was selected #############
if(empty($_POST['AC_reg']))
return 'Sorry, but you need to choose an aircraft';

########### Check if Bell 206 is selected #################

if($_POST['AC_reg'] == 'FHUY'){
 
  if (empty($_POST['AC_starts'])){
    return "Please fill in the following field(s): Starts";
  }
 
}  


########### Check if an R44 is selected
if ($_POST['AC_reg'] == 'FHIG' || 'GIFS' || 'GJRE' || 'GJRI' || 'GPRL'){
 
  $out = "Please fill in the following field(s): ";

  if (empty($_POST['AC_starts'])){
    $out = $out." |Starts| ";
    $n = 1;
  }

  if (empty($_POST['AC_hook'])){
    $out = $out." |Hook Time| ";
    $n = 1;
  } 
  
  if (!empty($n)){
    return $out;
  }

}

########### Check if AS350 is selected
if($_POST['AC_reg'] == 'GPRY'){ 
 
 $out = "Please fill in the following field(s): ";
    
  if (empty($_POST['AC_flights'])){
    $out = $out." |Flights| ";
    $m = 1;
  }
  
  if (empty($_POST['AC_ng'])){
    $out = $out." |NG Cycles| ";
    $m = 1;
  }
  
  if (empty($_POST['AC_np'])){
    $out = $out." |NP Cycles| ";
    $m = 1;
  }

  if (empty($_POST['AC_hook'])){
    $out = $out." |Hook Time| ";
    $m = 1;
  }  
  if (!empty($m)){
    return $out;
  } 

}
?>

Am I missing some thing simple? The AS350 type is the one giving me problems and it keeps getting the starts required from the R44 Type. Every thing else works fine.

Sean

Hello Sean,

I'm completely confused, whats the "starts" and whats the AS350 ? if this is some specific code logic then nobody may fix this buy you!🙂

Regards
Max

Hi Sean,
The issue is with your conditionals; more specifically, you can't do this:

if ($_POST['AC_reg'] == 'FHIG' || 'GIFS' || ...

This tests if $_POST['AC_reg'] is equal to 'FHIG', or if 'GIFS' is true (not whether $_POST['AC_reg'] is equal to'GIFS'). Being PHP, any string that's not empty will be considered true, so your script will always consider the type being R44..

There's a few ways of doing this properly, this is one:

$R44 = array('FHIG', 'GIFS', 'GJRE', 'GJRI', 'GPRL');
if (in_array($_POST['AC_reg'], $R44)) {
...

/Fredrik

Thanks nml375,

Still learning PHP, programing is a very secondary part of my job. I'll try the code out some time in the next day or two.

Max, sorry for the confusion this form is for our pilots out in the field to enter how many hours, engine cycles etc. they've incurred during the day flying. Each aircraft manufacture specifies different things we need to track. AS350 is a helicopter type also know as an A-Star. Industry jargon for different aircraft models is "types".

Thanks for the help and making such a great product it's saving me hours and hours of work.

Sean

Thanks NML35 works like a charm


Have a great day

Sean