Alloy UI : Custom validation and customising default validations

In this post, I am going to mention about two things

  1. How to customize alloy ui default validation.
  2. How to add custom validation in alloy ui.


Recently, I have faced a problem while working with Liferay Alloy UI validation, in firefox browser. Issue was, in case of blank field, placeholder value was acting as default value of field and validation was trying to validate the place holder value. I have customized the Liferay Alloy UI validation to fix this issue. Below is the code snippet for the same.

<aui:script></pre>
<pre>         AUI().use('aui-base','aui-form-validator','liferay-form',function(A){
			var DEFAULTS_FORM_VALIDATOR = AUI.defaults.FormValidator;

			var defaultEmail = DEFAULTS_FORM_VALIDATOR.RULES.email;
			var defaultDigits = DEFAULTS_FORM_VALIDATOR.RULES.digits;
			var defaultRequired = DEFAULTS_FORM_VALIDATOR.RULES.required;
			var defaultMaxLength = DEFAULTS_FORM_VALIDATOR.RULES.maxLength;

			var email = function(val, node, ruleValue) {
				if(node.attr('value') == node.attr('placeholder') ){
					return true;
				}
				return defaultEmail(val, node, ruleValue);
			};	

			var digits = function(val, node, ruleValue) {
				if(node.attr('value') == node.attr('placeholder') ){
					return true;
				}
				return defaultDigits(val, node, ruleValue);
			};	

			var required = function(val, node, ruleValue) {
				//alert('Val :['+val +'] Type :['+node.attr('type')+']');
				//alert(node.attr('type') == 'hidden' && node.attr('value') == 'false');

				if(node.attr('type') == 'hidden' && node.attr('value') == 'false'){
				    return false;
				}
				if(node.attr('value') == node.attr('placeholder') ){
					return false;
				}
				return defaultRequired(val, node, ruleValue);
			};		

			var maxLength = function(val, node, ruleValue) {
				if(node.attr('value') == node.attr('placeholder') ){
					return false;
				}
				return defaultMaxLength(val, node, ruleValue);
			};	

			var phone = function(val, node, ruleValue) {
				if(node.attr('value') == node.attr('placeholder') ){
					return false;
				}	

				var phoneRegExp = /^((\+)?[1-9]{1,2})?([-\s\.])?((\(\d{1,4}\))|\d{1,4})(([-\s\.])?[0-9]{1,12}){1,2}$/;
				// valid phone number match
				// 2155552527|(215) 555 2527|215.555.2527|+1 215-555-2527|+1.215.555.2527

			    var numbers = val.split('').length;
			    if (5 <= numbers && numbers <= 20 && phoneRegExp.test(val)) {
					return true;
			    }
			    return false;
			}

			A.mix(
				DEFAULTS_FORM_VALIDATOR.RULES,
				{
					email	 : email,
					digits	 : digits,
					maxLength: maxLength,
					required : required,
					phone    : phone
				},
				true
			);		

			A.mix(
				DEFAULTS_FORM_VALIDATOR.STRINGS,
				{
					phone    : 'Please enter valid phone number'
				},
				true
			);
   });

The above code snippet also has the custom validation for the phone . And we can use custom phone validation by using the following validation tag.

<aui:validator name="phone">
About these ads

3 thoughts on “Alloy UI : Custom validation and customising default validations

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s