Forums

Custom Validation

ChiefGoFor 15 Aug, 2015
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!
GreyHead 15 Aug, 2015
Hi ChiefGoFor,

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

Bob
ChiefGoFor 15 Aug, 2015
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!
ChiefGoFor 18 Aug, 2015
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.
GreyHead 20 Aug, 2015
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
ChiefGoFor 21 Aug, 2015
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!
This topic is locked and no more replies can be posted.