Liferay AUI Validations Using Custom Patterns
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui"%>
<%@page import="javax.portlet.PortletURL"%>
<portlet:defineObjects />
<portlet:actionURL name="saveEmployee"
var="saveEmployeeURL">
</portlet:actionURL>
<aui:form action="<%=saveEmployeeURL%>"
method="POST"
name="saveEmployeeForm" inlineLabels="true">
<aui:field-wrapper>
<aui:column columnWidth="15">
<label>Employee Name :<span style="color: red;"> *</span></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input name="employeeName"
type="text" label=""
inlineLabel="true">
<aui:validator name="required"></aui:validator>
<aui:validator name="custom"
errorMessage="Name is Mandatory">
function (val, fieldNode, ruleValue)
{
var result = true;
if(val.length==0)
{
result=false;
}
return result;
}
</aui:validator>
<aui:validator name="custom"
errorMessage="Only Alphabets are allowed">
function (val, fieldNode, ruleValue)
{
var result = true;
var pattern=/[^a-z|^A-Z|^\s]/;
var check = val.match(pattern);
if(check!=null)
{
result=false;
}
val=$.trim(val);
$("#<portlet:namespace />employeeName").val(val);
return result;
}
</aui:validator>
<aui:validator name="minLength">2</aui:validator>
<aui:validator name="maxLength">80</aui:validator>
</aui:input>
</aui:column>
<aui:column columnWidth="15">
<label>Mobile :<span style="color: red;"> *</span></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input type="text"
name="mobile" label=""
inlineLabel="true"
maxlength="10">
<aui:validator name="required"></aui:validator>
<aui:validator name="digits"
/>
<aui:validator name="minLength"
errorMessage="Please enter atleast 10 digits">10</aui:validator>
<aui:validator name="maxLength"
errorMessage="Please enter no more than 10 digits">10</aui:validator>
<aui:validator name="custom"
errorMessage="Please enter the valid mobile number">
function
(val, fieldNode, ruleValue)
{
var result = true;
var pattern=/^[1-9][0-9]+/;
var check = pattern.test(val);
if(check == false)
{
result=false;
}
val=$.trim(val);
$("#<portlet:namespace />mobile").val(val);
return result;
}
</aui:validator>
</aui:input>
</aui:column>
</aui:field-wrapper>
<br />
<aui:field-wrapper>
<aui:column columnWidth="15">
<label>Email :<span style="color: red;"> *</span></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input type="text"
name="email" label="" inlineLabel="true">
<aui:validator name="required"></aui:validator>
<aui:validator name="email"></aui:validator>
<aui:validator name="custom">
function (val, fieldNode, ruleValue)
{
var result = true;
val=$.trim(val);
$("#<portlet:namespace />email").val(val);
return result;
}
</aui:validator>
</aui:input>
</aui:column>
<aui:column columnWidth="15">
<label>Company Name :<span style="color: red;"> *</span></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input type="text"
name="companyName" label="" inlineLabel="true">
<aui:validator name="custom"
errorMessage="Please enter the valid company name">
function (val, fieldNode,
ruleValue)
{
var result = true;
var
pattern=/(?=.*[a-zA-Z])[a-zA-Z0-9 &@!#_\-\\\/\.]+/;
var check = pattern.test(val);
var checkValue = $("#<portlet:namespace />companyName").val();
if(check == false && checkValue)
{
result=false;
}
val=$.trim(val);
$("#<portlet:namespace />companyName").val(val);
return result;
}
</aui:validator>
</aui:input>
</aui:column>
</aui:field-wrapper>
<br />
<aui:field-wrapper>
<aui:column columnWidth="15">
<label>Password :<span style="color: red;"> *</span></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input name="password1"
type="password" id="password1"
label=""
showRequiredLabel="<%=false%>">
<aui:validator name="required"
/>
<aui:validator name="equalTo">'#<portlet:namespace
/>password2'</aui:validator>
</aui:input>
</aui:column>
<aui:column columnWidth="15">
<label>Confirm Password :<span style="color: red;"> *</span></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input name="password2"
type="password" id="password2"
label=""
showRequiredLabel="<%=false%>">
<aui:validator name="required"
/>
<aui:validator name="equalTo">'#<portlet:namespace
/>password1'</aui:validator>
</aui:input>
</aui:column>
</aui:field-wrapper>
<br />
<aui:field-wrapper>
<aui:column columnWidth="15">
<label>Pan Card Number :<span style="color: red;"> *</span></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input name="panCardNumber"
type="text" label=""
inlineLabel="true">
<aui:validator name="custom"
errorMessage="Please enter the valid pan card number">
function (val, fieldNode,
ruleValue)
{
var result = true;
var
pattern=/^[A-Z]{5}\d{4}[A-Z]{1}$/;
var check = pattern.test(val);
var checkValue = $("#<portlet:namespace />panCardNumber").val();
if(check == false && checkValue)
{
result=false;
}
val=$.trim(val);
$("#<portlet:namespace />panCardNumber").val(val);
return result;
}
</aui:validator>
</aui:input>
</aui:column>
<aui:column columnWidth="15">
<label>Compensation :<b style="color: red;"> *</b></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input name="compensation"
type="text" id="compensation"
label=""
inlineLabel="true">
<aui:validator name="custom"
errorMessage="Please enter the valid Compensation">
function (val, fieldNode, ruleValue)
{
var result = true;
var pattern
=/(^\d{0,4}\.\d{0,2})|(^\d{0,4})$/gm;
var check = pattern.test(val);
var checkValue = $("#<portlet:namespace />compensation").val();
if(check == false && checkValue)
{
result=false;
}
val=$.trim(val);
$("#<portlet:namespace />compensation").val(val);
return result;
}
</aui:validator>
</aui:input>
</aui:column>
</aui:field-wrapper>
<br />
<aui:field-wrapper>
<aui:column columnWidth="15">
<label>Experience :<b style="color: red;"> *</b></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input name="experience"
id="experience" type="text" label=""
inlineLabel="true">
<aui:validator name="required"
/>
<aui:validator name="custom"
errorMessage="Please enter the valid Experience">
function (val, fieldNode, ruleValue)
{
var result = true;
var pattern
=/(((^([0-9]|[1-3][0-9]|4[0-9]))+(?:\.([0-9]|(?:[0-0][0-9]|[1-1][0-1]))){1,2})|(^([0-9]|[1-3][0-9]|4[0-9])))$/;
var check = pattern.test(val);
var checkValue = $("#<portlet:namespace />experience").val();
if(check == false && checkValue)
{
result=false;
}
val=$.trim(val);
$("#<portlet:namespace />experience").val(val);
return result;
}
</aui:validator>
</aui:input>
</aui:column>
<aui:column columnWidth="15">
<label>Postal Code :<b style="color: red;"> *</b></label>
</aui:column>
<aui:column columnWidth="35">
<aui:input name="postalCode"
id="postalCode" type="text" label="">
<aui:validator name="required"
/>
<aui:validator name="custom"
errorMessage="Enter the valid Postal Code">
function
(val, fieldNode, ruleValue)
{
var result = true;
var pattern=/^([1-9])([0-9]){5}$/;
var check = pattern.test(val);
if(check == false)
{
result=false;
}
val=$.trim(val);
$("#<portlet:namespace />postalCode").val(val);
return result;
}
</aui:validator>
</aui:input>
</aui:column>
</aui:field-wrapper>
<br />
<aui:column columnWidth="15">
</aui:column>
<aui:column columnWidth="25">
</aui:column>
<aui:column columnWidth="60">
<aui:button type="submit"
value="Submit" name="saveEmployeeForm"></aui:button>
</aui:column>
</aui:form>
<!-- Useful patterns -->
<!--
1)For Website
var
pattern=/^((http|https):[\/][\/]|www.)([\w-]+\.)+[\w-]+(\/[\w-
.\/?%&=]*)?/;
2)Pattern for numbers upto 200
var
pattern=/^(([0-9])|([0-9][0-9])|([0-1][0-9][0-9]))$/;
3)digits comma digits
var
pattern=/^\d+(,\d+)*$/;
4)IFSC code validation
var pattern=/[A-Z|a-z]{4}[0][\d]{6}$/;
5)Address validation
var pattern=/(?=.*[a-zA-Z])[a-zA-Z0-9
@!#,_\-\\\/\.]+/;
6)Capability validation
var pattern=/(?=.*[a-zA-Z])[a-zA-Z0-9
+&,#_\-\/\.]+/;
-->
