Monday 21 September 2015

Liferay AUI validator example

        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 +&,#_\-\/\.]+/;
               
               -->

5 comments:

  1. This is really good custom validation examples.
    I require to validate floating value that can contain 8 decimal and 2 flaot value.
    Ex. (12345678.00)
    Can you provide regex string for that?

    ReplyDelete
    Replies
    1. Thanks for the comment.Reqex for your requirement is (^\d{0,8}\.\d{0,2})

      Delete














  2. this is a cell of a table.
    it can only validate the first line.
    could you help me to fixed it?

    ReplyDelete
    Replies
    1. https://web.liferay.com/zh/community/forums/-/message_boards/view_message/87392880#_19_message_87392880


      this is the problem

      Delete