Dynamic validation for text input based on select options

Hi,

I created a form in which we can select a number of poeple and the value selected create a number of input text in javascript (by hiding/showing divs)

Everything works well except I want to add validation on my "dynamic inputs" I tried to add a class validate["required"] to them but it's not working.

Thank you for your help !
Clément

Hi Clement,

How did you add the classes to the dynamic fields ? using JS ? please use it to add register your fields to the validation, here is how:

formCheck.register($('field_id'));

Regards,
Max

Hi Max,

Thx for the reply. Yes I added the class with JS using "Load JS". I don't really understand what you mean by "use it to add register your fields to the validation". Can you explain a bit more ?

Thx for your help, regards
Clément

Hi Clément,

Se the example code in Max's post and add this for each input.

Bob

Here's what I put in Load JS (I'm using double $ because of Mootools) :

			
$$('.cfdiv_text').hide();
$$('#nom_et_pr_nom_1_container_div').show();
$$('#nom1').addClass("validate['required']");
formCheck.register($$('#nom1'));

But I'm getting this error :
[code]
el is null
[Stopped on error] var FormCheck=new Class({Implements:[O...t("validateFailure");return false}}});
[/code]

Hi cboillat ,

I'm not sure that you need the $$ - does it work with just $ ??

Bob

Hi Bob,

If I remove the $$ the other lines (.hide(), .show() etc) don't work.

And here's the js error I'm getting with the line formCheck.register($$('#nom1')); :

[code]el.getProperty("class").split is not a function
[Stopper sur une erreur] var FormCheck=new Class({Implements:[O...t("validateFailure");return false}}});[/code]

Do you want me to PM you access to the admin panel ?

Regards
Clément

Hi Clément,

I think I have this working OK. I added ids to the nom2, nom3 and nom4 inputs and added the validate['required'] class to all four inputs:

window.addEvent('domready', function() {
	$('nbrpers').addEvent('change', myfunction);
	$$('.cfdiv_text').hide();
	function myfunction() {
		var e = $('nbrpers');
		var val = e.options[e.selectedIndex].value;
		switch (val) {
			case '1':
				$$('.cfdiv_text').hide();
				$('nom_et_pr_nom_1_container_div').show();
				$('nom1').addClass("validate['required']");
				formCheck.register($('nom1'));
				$('nom2').value = '';
				formCheck.dispose($('nom2'));
				$('nom3').value = '';
				formCheck.dispose($('nom3'));
				$('nom4').value = '';
				formCheck.dispose($('nom4'));
				break;
			case '2':
				$$('.cfdiv_text').hide();
				$('nom_et_pr_nom_1_container_div').show();
				$('nom_et_pr_nom_2_container_div').show();
				formCheck.register($('nom1'));
				formCheck.register($('nom2'));
				$('nom3').value = '';
				formCheck.dispose($('nom3'));
				$('nom4').value = '';
				formCheck.dispose($('nom4'));
				break;
			case '3':
				$$('.cfdiv_text').hide();
				$('nom_et_pr_nom_1_container_div').show();
				$('nom_et_pr_nom_2_container_div').show();
				$('nom_et_pr_nom_3_container_div').show();
				formCheck.register($('nom1'));
				formCheck.register($('nom2'));
				formCheck.register($('nom3'));
				$('nom4').value = '';
				formCheck.dispose($('nom4'));
				break;
			case '4':
				$$('.cfdiv_text').hide();
				$('nom_et_pr_nom_1_container_div').show();
				$('nom_et_pr_nom_2_container_div').show();
				$('nom_et_pr_nom_3_container_div').show();
				$('nom_et_pr_nom_4_container_div').show();
				formCheck.register($('nom1'));
				formCheck.register($('nom2'));
				formCheck.register($('nom3'));
				formCheck.register($('nom4'));
				break;
			default:
				$$('.cfdiv_text').hide();
		}
	};
});

This registers the displayed inputs and 'disposes' and clears any that are hidden - if for example the user selects 3 then changes their mind and selects 2.

The code vould be made more compact by using a loop but this version show how it works more clearly.

Note that using $$('.cfdiv_text') only works here because the form only has these four inputs, normally you'd need to add a class to identify the group of inputs that you wish to hide or display.

Bob

Hi Bob,

I'm really sorry but I'm still able to send the form without entering a string in the inputs.

Still don't want me PM you access to the admin panel ?

I was hopping buying you a beer on this one hehe :wink:

Regards
Clément

Hi Clément,

You can send a link to the form if you like.

I'm away for the next few days but will look when I'm back next week.

Bob

Hi Clément,

You have JQuery running on your site which I suspect is breaking all of the ChronoForms scripts.

Please remove JQuery or put it into noConflict mode so that the code can be tested correctly.

Bob

Out of the box jQuery isn't compatible with the MooTools library used by Joomla! and ChronoForms. You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest is to add a line of script in the ChronoForms Form JavaScript box:

jQuery.noConflict();

This will free the $ operator which is used by MooTools, so you may need to update your own javascripts to use the longer jQuery operator.

There is also a neat Joomla! 1.5 system plugin named SC jQuery that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode.

Thx for your answer.

I tried to use the jQuery.noConflict() but the template I'm using is relaying on it heavly and I can't manage making this working.

I'm gonna leave the form without validation. I already (and you too) spent enough time on this issue.

Again a big thank you for all the help you gave me.

Regards,
Clément

PS: I hope you are thirsty :wink:

Hi Clement,

jQuery.noConflict() wouldn't stop anything from working, will only help getting the Mootools stuff working, but it must be added in the right place, after the core JQuery file loaded and before any Mootools files are loaded.

Regards,
Max

Hi,
I have a similar issue.
I put this code in the load JS Event:

window.addEvent('domready', function() {
$('gutschein').addEvent('change', function() {
 
$('gutscheinnr').addClass("validate['required']");
formCheck.register($('gutscheinnr'));

});
});

The code in the Form is this:

<div class="ccms_form_element cfdiv_select" id="gutschein_container_div">
<label for="gutschein">Gutschein*</label>
<select size="1" id="gutschein" class="" title="" name="Gutschein">
<option value="">Bitte wählen</option>
<option value="Ja">Ja, ich habe einen Gutschein</option>
<option value="Nein">Nein, ich habe keinen Gutschein</option>
</select>
<div class="clear"></div><div id="error-message-Gutschein"></div>
</div>

<div class="ccms_form_element cfdiv_text" id="gutscheinnr_container_div">
<label for="gutscheinnr">Gutscheinnummer (falls vorhanden)</label>
<input id="gutscheinnr" maxlength="" size="30" class="" title="" type="text" value="" name="Gutscheinnr" />
<div class="clear"></div><div id="error-message-Gutscheinnr"></div>
</div>

When I change the selectbox in the frontend, a js error appears which says:
"formCheck is not defined"

The formcheck-yui.js and formcheck-max.js are loaded in the site.
Do you have any Idea?
THanks in advance and kind regards,
Malte

Hi Malte,

Yes, there has been a slight change recently, please change "formCheck" to "formCheck_FORM_NAME", and replace FORM_NAME with your form name, any "-" should be converted to "_"

Regards,
Max

Hi,
this was the solution, I missed this info.
Thanks!

Ah, one more strange behaviour.
I added the removal of the class and the disposal from the required status, but this part doesn´t execute in the script. I check the select value with an alert.
The class is set correctly, when the value is 'Ja' but the class is not removed, when I switch to any other value in the selectbox.

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

Hi StingerMKO,

The code looks OK to me, I'd need to debug step by step to work out why it isn't working.

Bob

Are there any changes in the latest version of Chronoforms?
I use again the code:

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

But it doesn´t work. the class required is set, but not removed, when i Switch the dropdown to "Nein". And allthough the value stands on "Ja" and the class required is set, the validation doesn´t work.

ADDITION: the field "zielgruppeklasse" is a dropdown with multiple selects allowed. In my previous posts from March the field which switches the required status is a standard text box. I am not sure if this is the problem here.

Hi StingerMKO,

I think that the problem is that you can't use validate['required'] on a select as it will always pass (a select always has a value). Try validate['select_multiple'] or validate['select'] instead.

Bob

Hi GreyHead,
thanks, but unfotunately this was not the issue.
When I do not use any script and make the multiple selectable field required, it gets the class
validate['required']. When I don´t select anything, the validation throws the popup. So it has to work I think. No Javascript errors on the site. Any other ideas?

Hi StingerMKO,

With a bit of a struggle I got this version working in a test form. Note that the 'else if' checks to see if the class is already assigned before trying to remove it.

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

Bob

Thanks for this thread, I'm trying to get the same behavior.🙂 I got it working almost except the onBlur validation errors still show. The form submits okay though after disposing, so I think the actual validation check is gone. It just still throws the error on blur. Any ideas? This is with your latest code from this morning GreyHead.

Here's a snippet, this is called on change of a country dropdown (select2). $j is a reference to jQuery.

      if ($j('#select2').val() === 'US') {
      
        $j('#city, #state, #zip').addClass('required validate[\'required\']').prev('label').prepend('<span>* </span>').parent('div').addClass('reqd');
        formCheck_info_request.register($('city'));
        formCheck_info_request.register($('state'));
        formCheck_info_request.register($('zip'));

      } else if ($j('#city').hasClass('required')) {

        $j('#city, #state, #zip').removeClass('required validate[\'required\']').prev('label').parent('div').removeClass('reqd').find('label span').remove();

        // not working for some reason...?
        formCheck_info_request.dispose($('city'));
        formCheck_info_request.dispose($('state'));
        formCheck_info_request.dispose($('zip'));
      }

Thanks!

Hi yorb,

Sorry but I run away as soon as I see mixed MooTools and jQuery - most likely one is breaking the other and the code that prevents the submit isn't running.

Bob

I understand your concern, though hopefully you can see that jQuery is not used in the formcheck calls.🙂 It's only used for adding/removing classes. I could of course rewrite that snippet using only MT, but it wouldn't affect the broken part.

The issue is that the validation popups are showing when they should not be. The form SHOULD submit, as it is doing. That part is working. The dipose method (called on a MT object, nothing to do with jQ here) is not disposing of the validation error popups, even though the fields are no longer part of the formcheck (as evidenced by the form submitting without them needing to be filled).

Thank you for any help. I'll keep messing with it and post any solutions I come up with.

EDIT:
Just to be thorough, I tried registering and disposing a field that was not part of the validation check initially, and the result was the same. Paste these into your JS console (with obvious substitutions) with a CF v4 form loaded on the page, and let me know if your results differ:

$('city').addClass("validate['required']");
formCheck_info_request.register($('city'));
// result: field is now required, form won't submit without it, popup shows normally -- all looks good

formCheck_info_request.dispose($('city'));
// result: field is no longer required, form submits without it, BUT: validation error popup/tooltip shows on blur.

Hi Yorb,

Thanks for the update, I can replicate the problem. I had missed the need to turn the On Blur validation on.

This looks like it may be a FormCheck bug, I'll have a look tomorrow and see if I can work out what is happening.

Bob

Hi yorb,

Several things seem to be happening here.
[list]

The MooTools removeClass() method doesn't remove the validation classes with quotes in them :-( I've used a string replace instead.

The FormCheck dispose() method only works correctly if the element has been removed, it doesn't remove the validation if the element is still in the form (as it is here). Re-registering the element with a new validation class does seem to work OK . . . except that

The FormCheck register() method fails if the class is empty. I added a dummy 'no_validation' class to fix that.

Neither of these clear any flags that are currently set - I added the forced reinitialize() at the end to clean them up.

[/list]
Here's the resulting (MooTools) code, there's a test form here.

window.addEvent('domready', function() {
  $('select2').addEvent('change', checkRequired);
});

function checkRequired() {
  var label, label_text, star, classes;
  star = new Element('span', {
    text: '* '
  });
  $$('#city, #state, #zip').each(function(item) {
    label = item.getPrevious('label');
    label_text = label.get('text');
    if ($('select2').value === 'US') {
      item.addClass("required validate['required']");
      formCheck_info_request.register(item);
      // add required flag and CSS
      label.set('text', star.get('html')+label_text);
      label.getParent('div').addClass('reqd');
    } else if ( item.hasClass('required') ) {
      item.removeClass('required');
      classes = item.getProperty('class');
      classes = classes.replace("validate['required']", '').clean();
      item.setProperty('class', classes);
      // make sure that the class is not empty
      if ( item.getProperty('class') === null ) {
        item.addClass('no_validation');
      }
      // re-register validation for updated class
      formCheck_info_request.register(item);
      // remove required flag and CSS
      label.set('text', label_text.replace(star.get('html'), ''));
      label.getParent('div').removeClass('reqd');
    }
    // reset validations to clear any set flags
    formCheck_info_request.reinitialize('forced');
  });
}

Bob

Thank you bob! Your test form did indeed work, and I pasted the contents of your checkRequired() function into my existing onchange stuff, and it worked. So then I set about trying to figure out what the difference was, and it turns out all I needed to do was .register() instead of .dispose().🙂 So long as you first remove the validate['required'] class (which jQuery does just fine), the register method removes any validation checks and tip displays from the field. No reinitialize necessary even.

Thanks again!

Hi yorb,

Excellent, thanks for the update.

Bob