Forums

I'm testing the multi-page form with validation when the [next] button is clicked:

<input type=button onclick="if(!valid.validate()) Event.stop(ev); collapseElem('mainForm_1'); expandElem('mainForm_2');" class="mainForm" value="Next" style="width: 60px" />

I would like to make a mandatory (required) field if the parent field is filled. I've been tryin' this manual but when I add this part of code to the "master" field:

<input type="text" id="master_field" name="master_field" onChange="if ( this.value != '' ) document.getElementById('slave_field').addClass('required');">
<input type="text" id="slave_field" name="slave_field">

Validation doesn't working - it skips it when i press the next button (code above) even when i type something into master_field

[list]1. I'm using Chronoforms 2.3.9[/list]
[list]2. prototype validation is turned on[/list]
[list]3. there are some fields in the same <div id="mainForm_1"> that are validated by the prototype validation amongst master_field and slave_field [/list]
[list]4. master_field isn't added to any validation fields in the validation settings tab[/list]
[list]5. slave_field isn't added to any validation fields in the validation settings tab[/list]

Is there any solution to this problem or am I doing something wrong ?

try to use firefox with firebug and see if some error happens at any step and if the class is added correctly ?

Cheers
Max

Hi sekijr,

I'm not certain but it looks to me as though there is no addClass method in Prototype.

Bob

PS This version appears to work with MooTools but needs more work for use in a production site.

<?php
$script = "
window.addEvent('domready', function() {
  var master = $('master_field');
  var slave  = $('slave_field');
  master.addEvent('change', function(event) {
    if ( master.value != '' ) {
//alert(slave.className);
       slave.className += ' required';
//alert(slave.className);
    }
  });
});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<input type="text" id="master_field" name="master_field" />
<input type="text" id="slave_field" name="slave_field" /><br />
<input type='submit' name='submit' />