If JA, next field should be rquiered

Hi Bob,
Need your quidance again.

If a field is selected JA, the next field should be

class=" validate['required']" 

If NEE is selected, it should be

class="" 

Field 1 is called gvb
Field 2 is called hcp

Any thoughts, or tut on this?

Hi SPABO,

In ChronoForms v4 you can't change the validation by just changing the class. The class is only read when the page loads, after that it has no effect unless you re-register the validation.

Try adding IDs to your inputs and then using JavaScript like this in a Load JS action

window.addEvent('domready', function() {
  $('gvb').addEvent('change', function() {
    if ( $('gvb').selected === true ) {
      $('hcp').addClass("validate['required']");
      formCheck.register($('hcp'));
    } else {
      $('hcp').removeClass("validate['required']");
      formCheck.dispose($('hcp'));
    }
  });
});

Not tested and will probably need debugging.

You don't say what kind of input gvb is so you may need to change if ( $('gvb').selected === true ) to match your form.

Bob

Hi Bob
I will create a testform and let you know !!!

No results Bob
This the HTML

<div class="ccms_form_element cfdiv_select" id="gvb_container_div"><label for="gvb">In bezit GVB</label><select size="1" id="gvb" class=" validate['required']" title="Geef hier aan of u al GVB heft behaald." name="gvb">
<option value="">Selecteer</option>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
<div title="GVB" rel="Geef hier aan of u in bezit bent van GVB" class="tooltipimg"><a href="#">?</a></div><div class="clear"></div><div id="error-message-gvb"></div></div>

<div class="ccms_form_element cfdiv_text" id="hcp_container_div"><label for="hcp">Handicap</label><input id="hcp" maxlength="4" size="4" title="Vul hier uw handicap in" type="text" value="" name="hcp" />
<div title="Handicap" rel="Vul hier uw handicap in" class="tooltipimg"><a href="#">?</a></div><div class="clear"></div><div id="error-message-handicap"></div></div>

This in Load JS at On Load

window.addEvent('domready', function() {
  $('gvb').addEvent('change', function() {
    if ( $('gvb').selected === 'Ja' ) {
      $('hcp').addClass("validate['required']");
      formCheck.register($('hcp'));
    } else {
      $('hcp').removeClass("validate['required']");
      formCheck.dispose($('hcp'));
    }
  });
}); 

Hi SPABO,

Debugging required . . . please try

window.addEvent('domready', function() {
  $('gvb').addEvent('change', function() {
    if ( $('gvb').value == 'Ja' ) {
      $('hcp').addClass("validate['required']");
      formCheck_form_name.register($('hcp'));
    } else {
      $('hcp').removeClass("validate['required']");
      formCheck_form_name.dispose($('hcp'));
    }
  });
}); 

but replace form_name with the name of your form.

Bob

Hi Bob, It/s working fine, however, it implifies if somebody selects "No" (gvb), het could fill out the field "hcp"
I solved this by not displaying this field unless "Ja" has been selected.
Pls find the HTML code

<div class="ccms_form_element cfdiv_select" id="gvb_container_div"><label for="gvb">GVB</label><select size="1" id="gvb" class=" validate['required']" title="Geef hier aan of u in bezit bent van GVB" name="gvb">
<option value="">Selecteer</option>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
<div title="GVB" rel="Geef hier aan of u GVB heeft" class="tooltipimg"><a href="#">?</a></div><div class="clear"></div><div id="error-message-gvb"></div></div>

<div class="ccms_form_element cfdiv_text" style="display: none" id="hcp_container_div"><label for="hcp">Handicap</label><input id="hcp" maxlength="150" size="10" title="Vul hier uw EGA-handicap in." type="text" value="" name="hcp" />
<div title="Handicap" rel="Vul hier uw handicap in." class="tooltipimg"><a href="#">?</a></div><div class="clear"></div><div id="error-message-hcp"></div></div>

I the JS On Load the following code (FORME_NAME should the formnane used)

window.addEvent('domready', function() {
      $('gvb').addEvent('change', function(event) {
      var e = new Event(event);
      if (e.target.value == 'Ja') {
       $('hcp').getParent().setStyle('display', 'block');
       } else {
        $('hcp').getParent().setStyle('display', 'none');
       
        }
      });
    });

window.addEvent('domready', function() {
  $('gvb').addEvent('change', function() {
    if ( $('gvb').value == 'Ja' ) {
      $('hcp').addClass("validate['required']");
      formCheck_FORM_NAME.register($('hcp'));
    } else {
      $('hcp').removeClass("validate['required']");
      formCheck_FORM_NAME.dispose($('hcp'));
    }
  });

Not sure if this coding could be "compressed"

Anyway, this is exactly what I was looking for!!

Hi SPABO,

Your code will only set the display when the page is loaded, you need it to change when the selection changes. You should probably also clear any value set in the input when you hide it.

Bob

Not sure waht yoy try to say, but the 'field" HCP only opens when Ja has been selected at field GVB

Hi SPABO,

Sorry, my mistake, I misread your code.

Here's a compressed version:

window.addEvent('domready', function() {
  var hcp, gvb;
  hcp = $('hcp');
  gvb = $('gvb');
  gvb.addEvent('change', function() {
    if ( gvb.value == 'Ja' ) {
      hcp.getParent().setStyle('display', 'block');
      hcp.addClass("validate['required']");
      formCheck_FORM_NAME.register(hcp);
    } else {
      hcp.value = '';
      hcp.getParent().setStyle('display', 'none');
      hcp.removeClass("validate['required']");
      formCheck_FORM_NAME.dispose(hcp);
    }
  });
}); 

Bob

Excellent Bob!

Works perfectly!

Many thanks
Rgds
Kees