Custom AUI Validation in Liferay 6.1

Implementing a custom rule for non-alphabets using AUI Validator:

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
	<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui"%>
	<aui:form action="/abc" method="post" name="form">
	<aui:input name="textitemname" label="Text Item Name" class="aui-field-required" value="" size="40">
	</aui:input>
	<br/><br/><aui:button cssClass="save" value="Save" type="submit"></aui:button>
	</aui:form>
	<script type="text/javascript" charset="utf-8">
	AUI().ready('aui-form-validator', 'aui-overlay-context-panel', function(A) {
	A.mix(
	YUI.AUI.defaults.FormValidator.RULES,
	{
	alphaRule: function(val, fieldNode, ruleValue) {
	if(val != ""){
	var arr = val.match(/^[a-zA-Z0-9_]*$/);
	if(arr == null){
	return false;
	}else{
	return true;
	}
	}
	return true;
	}
	},
	true
	);
	var validator2 = new A.FormValidator({
	boundingBox: document.<portlet:namespace/>form,
	rules: {
	<portlet:namespace />textitemname:{
	required: true,
	alphaRule:true
	}
	},
	fieldStrings: {
	<portlet:namespace />textitemname: {
	required: 'TextName Required',
	alphaRule: 'None other than alpha characters'
	}
	},
	on: {
	validateField: function(event) {
	},
	validField: function(event) {
	},
	errorField: function(event) {
	},
	submitError: function(event) {
	alert("submitError");
	var formEvent = event.validator.formEvent;
	var errors = event.validator.errors;
	},
	submit: function(event) {
	alert("Submit");
	var formEvent = event.validator.formEvent;
	return false;
	}
	}
	});
	});
	</script>

view raw AUI-Validator-CustomRule.jsp hosted with ❤ by GitHub

A simple program to compare Start Date and End Date using AUI Validator:

	<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
	<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui"%>
	<aui:form action="/abc" method="post" name="form">
	<div class="aui-field-content" id="datePicker">
	<table>
	<tr>
	<td><aui:input label="Start Date" name="startDate" size="20">
	<aui:validator name="required" errorMessage="Start Date is required. Select a value." />
	</aui:input>
	</td>
	<td valign="top" style="padding-top: 18px">
	<div class="aui-datepicker-button-wrapper">
	<button class="aui-buttonitem-content aui-widget aui-component aui-buttonitem aui-state-default aui-buttonitem-icon-only"
	id="startDate" type="button">
	<span class="aui-buttonitem-icon aui-icon aui-icon-calendar"></span>
	</button>
	</td>
	</div>
	</tr>
	</table>
	</div>
	<div class="aui-field-content" id="datePicker1">
	<table>
	<tr>
	<td><aui:input label="End Date" name="endDate" size="20">
	<aui:validator name="required" errorMessage="End Date is required. Select a value."/>
	<aui:validator name="custom"
	errorMessage="Leave blank or enter a date greater than the begin date.">
	function(val, fieldNode, ruleValue)
	{
	var startDateObj = document.getElementById("<portlet:namespace />startDate");
	var startDate;
	var result=false;
	//case when end date is blank
	//no validation required then
	if(val == ""){
	return true;
	}
	if(startDateObj) {
	startDate = new Date(startDateObj.value);
	}else{
	result = false;
	}
	var endDate = new Date(val);
	if(startDate && endDate){
	result = endDate.getTime()>startDate.getTime();
	}else{
	result = false;
	}
	return result;
	}
	</aui:validator>
	</aui:input>
	</td>
	<td valign="top" style="padding-top: 18px">
	<div class="aui-datepicker-button-wrapper">
	<button class="aui-buttonitem-content aui-widget aui-component aui-buttonitem aui-state-default aui-buttonitem-icon-only" id="endDate" type="button">
	<span class="aui-buttonitem-icon aui-icon aui-icon-calendar"></span>
	</button>
	</td>
	</div>
	</tr>
	</table>
	</div>
	<br/><br/><aui:button cssClass="save" value="Save" type="Submit"></aui:button>
	</aui:form>
	<script type="text/javascript" charset="utf-8">
	AUI().ready('alloy-node','aui-form-validator', 'aui-overlay-context-panel', 'aui-datepicker', function(A) {
	var startDate = new A.DatePicker({
	trigger: '#<portlet:namespace />startDate',
	calendar: {
	dateFormat: '%m/%d/%Y',
	},
	yearRange: [1990, (new Date).getFullYear()]
	}).render('#datePicker');
	A.one("#startDate").on("click", function () {
	startDate.show();
	});
	var endDate = new A.DatePicker({
	trigger: '#<portlet:namespace />endDate',
	calendar: {
	dateFormat: '%m/%d/%Y',
	},
	yearRange: [1990, (new Date).getFullYear()]
	}).render('#datePicker1');
	A.one("#endDate").on("click", function () {
	endDate.show();
	});
	});
	</script>

view raw AUI-Validator-CompareDates.jsp hosted with ❤ by GitHub

Many a times it is required, that we want to provide rules to dynamically added fields.
We can use current validator and iterate over rules by passing rowId:

	var rules = validator2.get('rules'); // get current validator
	rules['<portlet:namespace />info' + dynamicRowId] = {required: true};
	rules['<portlet:namespace />desc' + dynamicRowId] = {required: true, maxLength: 255};

view raw AUI-DynamicRules,js hosted with ❤ by GitHub