Forums

First thanks for a great product. I spent months trying to integrate a bunch of COTS products and finally decided to throw them all out and build from scratch with Chronoforms. If I'd bitten the bullet and done this first I'd be finished by now😟

Anyway, I've built a multi-tab login / register form with separate submit buttons which is working well. I wrote the script below to dynamically disable validation on the inactive tab so it doesn't prevent submit. It works as expected but only enables/disables validation on the first field in each tab. Subsequent calls to gvalidate fail with TypeError: gval is null..return gval.get();

I've spent lots of time getting to this stage and it's *almost* right. I can smell success!

Any ideas on how I can make multiple calls to gvalidate succeed?

Thanks
John

jQuery(document).ready(function(){

	// Enable validation for login tab fields on load 
	vgRequired("input.register", "disable");
	vgRequired("input.login", "enable");

	// Get the active CF5 bootstrap tab
	jQuery('a[data-g-toggle="tab"]').on('shown.bs.tab', function (e) {
	var targetTab = jQuery(e.target).attr("href");
	if ((targetTab == '#register-tab')) { // register tab clicked
		
		vgRequired("input.register", "enable");
		vgRequired("input.login", "disable");
		
	} else if ((targetTab == '#login-tab')){ // login tab clicked   
		
		vgRequired("input.register", "disable");
		vgRequired("input.login", "enable");	

		}
	});		
		
});

function vgRequired(vgTypeClass, enableDisable) {

	// Loop thru input elements 
	jQuery(vgTypeClass).each(function (index){		
		targetField = "#"+this.id;		
		if (enableDisable == "enable") {
			jQuery(targetField).addClass('validate["required"]');
			jQuery(targetField).gvalidate('get').enable();			
		} else if (enableDisable == "disable")
			jQuery(targetField).removeClass('validate["required"]');
			jQuery(targetField).gvalidate('get').reset();							
	});
}

I dug around in gvalidate.js and noticed there is a 500ms timeout on resets. I introduced a timeout on the calls and put the in a callback on the addClass which helped but the results were inconsistent.

I ended up just using parsley.js with a similar construct. Works great and I can display errors in bootstrap popups which is consistent with the rest of the UI.

Hi John,

I may be too late with this - sorry,

You can use the jQuery :input to enable/disable all of the elements inside a group. I got this code to work to disable all the elements in the hidden tabs - actually it disables them all and then re-enables the inputs in the active tab.

jQuery(document).ready(function(jQ){
  // add a click event to all the <a> tags in the container (the tab headers)
  jQ('#chronoform-container-1').on('click', 'a', function(e) {
   // disable all 'input' elements in the container
    jQ('#chronoform-container-1 :input').prop('disabled', true);
    // get the clicked href
    var active = jQ(this).attr('href');
    // enable all the 'input' elements in the active tab
    jQ(active+' :input').prop('disabled', false);
  });
});

This is probably too simple to do exactly what you need, but the method can be extended.

Note: chronoform-container-1 is the id of the parent container.

Bob

Hi Bob, your code is more efficient than mine! The end result is the same of course.

It's interesting that you were able to get this working by disabling fields. I tried this early in my testing and couldn't get it to work. I must have overlooked something. I'll have another look at it.

Thanks
John