Custom Validation

I have a form with two submit buttons. "Submit" and "Save and Finish Later".

When I click "Submit", all fields are required. When "Save and Finish Later" is clicked, none of the fields are required.

To accommodate this, I have a custom JavaScript file that I include via Load JS. All of the form validation is done in this script by using addClass() and removeClass() to add "validate['required']", "validate['group:"+id+"']", and "validate['tooltip']" as needed.

Everything works great except for one piece. When I remove "validate['group:"+id+"']", the change does not seem to register. Searching the forum, it looks like I would need to use .dispose() in previous versions. Essentially, even though I call removeClass(), it still flags it as not having an option selected when it in fact does.

Below is a sample of that file. If you want to see the whole file, please let me know and I can PM it to you. I have a feeling that after I "removeClass()", I need to call something to make it work.

function validate_form_fields(what_button){
	makeRequiredRadio(what_button, jQuery(".industry_type_radio"), "10");
	makeRequiredRadio(what_button, jQuery(".type_of_business"), "38");
}

function makeRequiredRadio(what_button, el, id){
	var req = "validate['group:"+id+"']";
	
	if(what_button == 'submit'){
		jQuery(el).addClass(req);
	} else {
		jQuery(el).removeClass(req);
	}
}

Thank you!

Hi ChiefGoFor,

Is the Save and Finish Later button a submit button? If it is then the validation should work OK.

Bob

Whenever I click "Submit", I add validation to all fields (note: I only have two in the example above, but there are a lot more).
Whenever I click "Save and Finish Later", I remove all of the validation from the fields.

I have events on the submit buttons to trigger code to either validate or remove validation on all of the fields. Once I addClass() to add validation, removeClass() does not fully remove validation.

If I hit "Save and Finish Later" first and never "Submit" first, Save works great. It only fails when I Click "Submit", have a field that does not pass validation, then try to click "Save".

Thanks!

I think my issue can be summed up with the following few statements/questions:

Using jQuery's addClass() to add validation to an element works great.
If I remove validation using jQuery's removeClass(), how do I make Chronoforms recognize that the class value has been removed?

Currently, I am using the following three class values to add/remove validation. Removal of "required" appears to be working, but removeal of "group" and "tooltip" do not.

Different types of validation that I am using within different functions:

var req = "validate['required']"; //<-- works fine with addClass() and removeClass()
var req = "validate['group:"+id+"']"; //<-- works fine with addClass() but not removeClass()
var req = "validate['tooltip']"; //<-- works fine with addClass() but not removeClass()

It seems like I need to call some trigger to make removeClass() stick... kind of like what I think dispose() did in previous versions.
If I can figure this out, I can integrate it.

Bump?🙂

Hi ChiefGoFor,

After a lot of experimentation and digging in the code I have found a solution for this - taking a slightly different approach. Unfortunately if requires a hack in the CF code. Hopefully Max will have a more elegant solution.

In my version set up the form as usual with validation added and a second Save button of Type Button (not submit).

Add this JavaScript in a Load JavaScript action in the form On Load event:

var stopValidation = false;
jQuery(document).ready(function(){
  jQuery('#save_button_id').on('click', function() {
    stopValidation = true;
    jQuery('#chronoform-form_id').submit();
  });
});

Replace the save_button_id and the form_id with values from your form.

Edit the /libraries/cegcore/assets/gplugins/gvalidation/gvalidation.js file around line 170 and add three lines:

  validate: function(showError){
   var gval = this;
   //add these three lines
   if ( typeof stopValidation !== 'undefined' && stopValidation == true ) {
    gval.disabled = true;
   }
   // end of hack
   gval.inspect();

This code sets a global stopValidation variable, set to false by default; if you click the Save button it it set to true and then the validation code ignores all the validations.

Bob

Thank you Bob! That works great! Now, I just have some code clean up and this form will be done.

A more personal thanks should hit your inbox in the next little bit.

Thanks again!