Forums de discussion

multiple AUI validator in single form

Selva Kumar, modifié il y a 7 années.

multiple AUI validator in single form

New Member Envoyer: 1 Date d'inscription: 01/07/16 Publications récentes
Hi

We are wiring multiple AUI validators in JavaScript for a single form. Basically the layout contains multiple tabs. So we have wired separate validator for each tab content because i need to validate the particular tab content while navigating from tab.

But what happens is while focus out from a field, validator provides error message in grey color. After debugging i found, one validator puts error class in the field but other validator removes it. I have came across similar issue in liferay issues HERE

Is there any work around or solution?
thumbnail
Byrån Zaugg, modifié il y a 7 années.

RE: multiple AUI validator in single form

Expert Publications: 252 Date d'inscription: 06/04/12 Publications récentes
That AUI ticket relates to https://issues.liferay.com/browse/LPS-66058. In both tickets I explain that forms can only have one AUI Form Validator, or they will conflict with each other.

Some workarounds for you would be to either:
  • conditionally requires validation for only the inputs under the tab you're on
  • or create multiple forms, one for each tab

More info: https://issues.liferay.com/browse/LPS-66058?focusedCommentId=791626&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-791626
Selva kumar, modifié il y a 7 années.

RE: multiple AUI validator in single form

Junior Member Publications: 39 Date d'inscription: 23/07/15 Publications récentes
Hi Bryän

Thanks for the reply.

I tried with multiple forms already. it worked but i need all the form data in the final submit which i couldn't get even spending much time.
actually am using jQuery tabs.

so in each tab
1. beforeActivate event :i would be validating the current tab. if validation is success i would be proceeding else i would prevent tab navigation.
2. activate event : here i would be clearing the existing rules and its field strings from the validator and set a new rules and field strings in the validator that corresponds the current opening tab.

the above approach solved my problem.
is the implementation correct ? if so do you foresee any issues?
thumbnail
Byrån Zaugg, modifié il y a 7 années.

RE: multiple AUI validator in single form

Expert Publications: 252 Date d'inscription: 06/04/12 Publications récentes
It would work if, on each tab navigation, forward or back, you reload the tab's rules,

Another way to do it would be to have all rules already set, for every tab, then when the user tries to navigate to another tab, you manually validate just the fields on that tab and check if the Form Validator has any errors.

var tabOneFieldNames = [
	'fname',
	'lanme',
	'age'
];

function onTabNavigate(fieldNames, nextTab) {
	var formValidator = Liferay.Form.get('<portlet:namespace />myForm').formValidator;

	formValidator.eachRule(
		function(rule, fieldName) {
			// check only fields on this tab
			if (A.Array.indexOf(fieldNames, fieldName) &gt;= 0) {
				formValidator.validateField(fieldName);
			}
		}
	);

	// check the Form Validator for errors
	if (formValidator.hasErrors()) {
		formValidator.focusInvalidField();
	}
	else {
		goToNextTab(nextTab);
	}
}

onTabNavigate(tabOneFieldNames, 'tab-two');


Please note, this is just example code, you'll need to tweak it for your needs.