<aui:validator/> and AJAX

[Cristi Dascalu, geändert vor 9 Jahren.]

Hello all

I'm pretty new to Liferay portlet development and I've stumbled upon the following problem:

I use <aui:validator> for some fields. How can I access the FormValidator that gets created by the <aui:validator> tag?
I need a reference to the validator because i want to validate individual fields, as needed (not on form submit).
I hope this is do-able. If not, do you guys have any suggestions?

Context info:
I have a form with a bunch of fields that are presented to user as he progresses: after he completes filling the visible fields he clicks a button and then an AJAX call is made, submitting the values that he's filled in so far. After the AJAX call, the completed part of the form is collapsed and the next part becomes visible, the user following the same steps as before until all the form has been filled in.
I need to control the validation process because i don't want to do the AJAX call if the data is invalid.

Thanks!

[Pankaj Kathiriya, geändert vor 9 Jahren.]

You can attach custom aui:validator to any fields.
For Example:

<aui:input name="test" id="test" label="Name">
			<aui:validator name="custom" errormessage="ERROR MESSAGE">
				function(value, fieldNode, ruleValue) 
				{			        
			    	//write logic for validating value using ajax or any rule
			    }
			</aui:validator>	
</aui:input>

Hope this would help.

[Cristi Dascalu, geändert vor 9 Jahren.]

Thank you very much for your quick reply!
I'm marking this as answered because this can be an approach, combined with using global javascript variables in the validator and checking them before the AJAX call.

Regarding AUI, do you have any idea how to get a hold of the FormValidator object (or any other object)?

[Vishal Shah, geändert vor 7 Jahren.]

Hi Pankaj,

I have same scenario, and I did same thing by using custom validation of the global variable. But I can't get the validation when the form submission.
Scenario : There is 1 JSP page, which have AUI Form controls with some of fields, and there is radio buttons, If you select the radio button based on the another AUI fields control from another JSP via AJAX call. But AUI validation not working, when submission of the form and when lost the focus of that fields (which comes from the AJAX).

[Bruno V, geändert vor 7 Jahren.]

Hello,
I have a similar problem. I want to trigger the validator on the whole form when clicking an another button that the "submit" button.
How can I get the validator object to do this ? Thank you.

[Byrån Zaugg, geändert vor 7 Jahren.]

You could try something like this:

	<aui:script use="liferay-form">
		var myFormValidator = Liferay.Form.get('<portlet:namespace />fm').formValidator;

		myFormValidator.validateField('<portlet:namespace />myField');

		if (!myFormValidator.hasErrors) {
			/// AJAX
		}
	</aui:script>

[Bruno V, geändert vor 7 Jahren.]

Unfortunately, the code
"Liferay.Form.get('<portlet:namespace />fm').formValidator;"
returns
"Liferay.Form.get is not a function"

[Byrån Zaugg, geändert vor 7 Jahren.]

Odd.

[Byrån Zaugg, geändert vor 7 Jahren.]

Could you share with us the shortest, simplest example of your code?

[Bruno V, geändert vor 7 Jahren.]

Hello,
I think that the problem with "Liferay.Form.get('<portlet:namespace />fm').formValidator" is that I work with the version 1.5 of AUI.
Fortunately, I found a solution using :

isFormValid = function() {
var validator = Liferay.Form._INSTANCES.myForm.formValidator;
validator.validate();
return !validator.hasErrors();
}

[delang j, geändert vor 7 Jahren.]

hi,
can u help me.
i have problem using aui:validator with ajax. my code is to validate data already existed or not in database, but somehow it always give error message although data not exist. below is the code.
html

<aui:validator name="custom" errormessage="error_no_casis_sudah_wujud">
	function(val, node, ruleValue) {
		return <portlet:namespace />checkNoEnjin(val, node.attr('id'));
}
</aui:validator>

js

Liferay.provide(
		window,
		'<portlet:namespace />checkNoEnjin',
		function(val, field) {
		    console.log(field);

			A.io.request('&lt;%= getNoEnjin%&gt;',{
				dataType: 'json',
				method: 'POST',
				cache: false,
				data: {<portlet:namespace />no: val},
           		on: {
				success: function() {
			       	    var data = this.get('responseData');
			           if (data.existed === true) {
			               	console.log('- existed');
					return false;
			           } else if (data.existed === false) {
		             	  	console.log('- not existed');
		             	  	return true;

			           }
        			}
        		}
       		});
		}
	);

log from browser

data - true
- existed
data - false
- not existed

thanks

[Vlad Gets, geändert vor 7 Jahren.]

its simple
reject function

delang j:

hi,
can u help me.
i have problem using aui:validator with ajax. my code is to validate data already existed or not in database, but somehow it always give error message although data not exist. below is the code.
html

<aui:validator name="custom" errormessage="error_no_casis_sudah_wujud">
	function(val, node, ruleValue) {
		return <portlet:namespace />checkNoEnjin(val, node.attr('id'));
}
</aui:validator>

js

Liferay.provide(
		window,
		'<portlet:namespace />checkNoEnjin',
		function(val, field) {
		    console.log(field);

			A.io.request('&lt;%= getNoEnjin%&gt;',{
				dataType: 'json',
				method: 'POST',
				cache: false,
				data: {<portlet:namespace />no: val},
           		on: {
				success: function() {
			       	    var data = this.get('responseData');
			           if (data.existed === true) {
			               	console.log('- existed');
					return false;
			           } else if (data.existed === false) {
		             	  	console.log('- not existed');
		             	  	return true;

			           }
        			}
        		}
       		});
		}
	);

log from browser

data - true
- existed
data - false
- not existed

thanks

[delang j, geändert vor 7 Jahren.]

im sorry couldnt get it, can u explain more.
tq

[delang j, geändert vor 7 Jahren.]

					<aui:validator name="custom" errormessage="error_no_casis_sudah_wujud">
						function(val, node, ruleValue) {
							var result = true;
							AUI().use('aui-base','aui-io-request', function(A) {
								A.io.request('&lt;%= getNoEnjin%&gt;',{
									dataType: 'json',
									method: 'POST',
									cache: false,
									data: {<portlet:namespace />no: val},
					           		on: {
										success: function() {
								       	    var data = this.get('responseData');
								       	    console.log("data - "+data.existed);
								       		result = true;
								           if (data.existed == 'true') {
								               	console.log('- existed');
								               	result = false;
								           } else if (data.existed == 'false') {
							             	  	console.log('- not existed');
							             	  	result = true;
								           }
					        			}
					        		}
					       		});
							});
							console.log('result - '+result);
							return result;
						}
					</aui:validator>

error message still display although 'result' return 'true'.

[Vlad Gets, geändert vor 7 Jahren.]

thanks

[delang j, geändert vor 7 Jahren.]

hi guys,
need help on this,
validator with ajax still not working on my side, as per my code above, error always display.

[Byrån Zaugg, geändert vor 7 Jahren.]

					<aui:validator name="custom" errormessage="error_no_casis_sudah_wujud">
						function(val, node, ruleValue) {
							var result = true;

							// Async stuff ...

							console.log('result - '+result);
							return result;
						}
					</aui:validator>

The problem is, you're returning the result from the function, before the asynchronous AJAX returns.

You're going to need to approach this another way. The validator needs the info from data.existed before it's run.

[Suresh Yadagiri, geändert vor 7 Jahren.]

Did anyone resolved this?