Forums

Partial form validation on custom tabs form

weissmag 19 Feb, 2012
Hi,

I've made a multiple tabs form with JQuery UI tabs, I used custom elements to inject the div tags in between the form fields to split them to tab pages.

I have single submit button on the last page, and links (as custom elements) in each tab page that does the "next tab" action.

the validation works on submit+blur.

One point I could not accomplish, is validating the form fields in each tab before moving to the next tab.
I want to arrive to the last page with knowing that all the previous fields in all the previous tabs are validated.
Is there a way from JS to trigger validation for a subset form fields i parallel to the onSubit & onBlur ?

versions:
joomla 1.5.25
ChronoForms 4.0 RC3.11

Thank you,
weissmag
GreyHead 20 Feb, 2012
Hi weissmag,

There are tabs built-in to this version of ChronoForm using the Joomla! tabs code. I think that they suffer the same problem. Check here for another thread where Max has discussed this.

I'm sure that there is a solution but I don't know what it is.

Bob
weissmag 22 Feb, 2012
Hi Bob,

I made a solution for this and i want to share it...
1. I altered your FormCheckMax javascript file and added this function which takes a list of field names to validate

isFieldsValid : function(fieldNames) {
		var thisFieldsAreValid=true;
		this.validations.each(function(el) {
			if(fieldNames.indexOf(el.getProperty('name'))>-1)
			{
				var validation = this.manageError(el,'showErrors');
				if(!validation) thisFieldsAreValid = false;
			}
		}, this);
		return thisFieldsAreValid;
	},



2. this is the code using it, again it is made for jquery ui tabs
* 🤔 $j is my noConflict jquery *
* 🤔 for this to work, every field that is validated should have 'validTab' class added to it also


function validateTab(tabNum)
	{
		var inputs=$j("div#tabs-"+tabNum).find(".validTab");
		var inputsNames=[];
		$j.each(inputs,function(i,el){
			var elName=$j(el).attr("name");			
			inputsNames.push(elName);
		});			
		return formCheck_my_form.isFieldsValid(inputsNames);
	}


this is called by the click event of the next button/link to determine if to switch tab or not.

hope this might help someone, or that you'll include something inspired by this in next versions.😀

Thanks,
weissmag
Max_admin 11 Mar, 2012
Hi weissmag,

Thanks for that, this has inspired me with some idea to do the same for the core Joomla tabs/sliders, very different code though!🙂

Regards,
Max
Max
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
luizcotta 19 Jul, 2012
This solution did not work for me. I have probably done something wrong. Small steps: where do I place each piece of code you posted, weissmag?
GreyHead 21 Jul, 2012
Hi luizcotta,

I thought that Max had now built a version of this code into the latest CF releases?

Bob
luizcotta 25 Jul, 2012
I thought so myself, GreyHead, but I could not make it work.
luizcotta 26 Jul, 2012
In fact, if it's there, I could not find the means to do it.
GreyHead 27 Aug, 2012
Hi,

I finally checked this out and got it to work OK. Please see this FAQ

Bob
This topic is locked and no more replies can be posted.