Liferay portlet with alloy Ui form validator example.

•  Alloy Ui  is built on YUI and we can use it in our liferay portlets.

•  Yui provides many component which are easy to use in our portlets

•  Here we see basic form validator.example with liferay portlet.

• Create portlet AlloyUi-portlet in eclipse.

• Add below content in view.jsp file Here we create two link for two JSP.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>

<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

<portlet:defineObjects />

<portlet:renderURL var="basicform">
<portlet:param name="mvcPath" value="/BasicFormValidatorExample.jsp"/>
</portlet:renderURL>

<portlet:renderURL var="fullform">
<portlet:param name="mvcPath" value="/FullFormValidatorExample.jsp"/>
</portlet:renderURL>


<a href="<%=basicform.toString()%>">Basic form validation example</a><br/>
<a href="<%=fullform.toString()%>">Full form validation example</a><br/>

 Now create two jsp file.

For use of yui in our custom portlet we require to add below two lines library  in our jsp file.

<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>

<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>


Example1 :- THIS JSP is demo for basic validation. It is validate that all the field of form is necessary.

BasicFormValidatorExample.jsp

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>

<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

<portlet:defineObjects />

<portlet:renderURL var="view">
<portlet:param name="mvcPath" value="/view.jsp"/>
</portlet:renderURL>


<a href="<%=view.toString()%>">Home</a><br/>

<form id="myForm">

  <div class="control-group">
    <label class="control-label" for="name">Name:</label>
    <div class="controls">
      <input name="name" id="name" class="field-required" type="text">
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="age">Age:</label>
    <div class="controls">
      <input name="age" id="age" class="field-required field-digits" type="text">
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="email">E-mail:</label>
    <div class="controls">
      <input name="email" id="email" class="field-required field-email" type="text">
    </div>
  </div>

  <input class="btn btn-info" type="submit" value="Submit">
  <input class="btn btn-primary" type="reset" value="Reset">

</form>

<script type="text/javascript">
YUI().use(
 'aui-form-validator',
 function(Y) {
   new Y.FormValidator(
     {
       boundingBox: '#myForm'
     }
   );
 }
);
</script>


Example2 :- THIS JSP is demo for advance validation. 

FullFormValidatorExample.jsp

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<script src="http://cdn.alloyui.com/2.5.0/aui/aui-min.js"></script>

<link href="http://cdn.alloyui.com/2.5.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

<portlet:defineObjects />

<portlet:renderURL var="view">
<portlet:param name="mvcPath" value="/view.jsp"/>
</portlet:renderURL>


<a href="<%=view.toString()%>">Home</a><br/>

<form id="myForm">

  <div class="control-group">
    <label class="control-label" for="name">Name:</label>
    <div class="controls">
      <input name="name" id="name" type="text">
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="picture">Picture:</label>
    <div class="controls">
      <input name="picture" id="picture" type="file">
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="email">E-mail:</label>
    <div class="controls">
      <input name="email" id="email" type="text">
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="emailConfirmation">Confirm e-mail:</label>
    <div class="controls">
      <input name="emailConfirmation" id="emailConfirmation" type="text">
    </div>
  </div>

  <div class="control-group">
    <label class="control-label" for="url">Site URL:</label>
    <div class="controls">
      <input name="url" id="url" type="text">
    </div>
  </div>

  <input class="btn btn-info" type="submit" value="Submit">
  <input class="btn btn-primary" type="reset" value="Reset">

</form>


<script type="text/javascript">


YUI().use(
  'aui-form-validator',
  function(Y) {
    var rules = {
      email: {
        email: true,
        required: true
      },
      emailConfirmation: {
        email: true,
        equalTo: '#email',
        required: true
      },
      gender: {
        required: true
      },
      name: {
        rangeLength: [2, 50],
        required: true
      },
      picture: {
        acceptFiles: 'jpg, gif, png',
        required: true
      },
      url: {
        url: true
      }
    };

    var fieldStrings = {
      email: {
        required: 'Type your email in this field.'
      },
      name: {
        required: 'Please provide your name.'
      }
    };

    new Y.FormValidator(
      {
        boundingBox: '#myForm',
        fieldStrings: fieldStrings,
        rules: rules,
        showAllMessages: true
      }
    );
  }
);

</script>

• Now deploy portlet. we can see basic AlloyUI portlet with links for two form jsp.

 Click on Basic form validation url now you can see form click on submit.

Click on Home you will redirect to view page now click on Full form validation URL Click on submit.

You can find full source code from below location

https://drive.google.com/file/d/0B9B1NsG0lyx6M1lnMkFTOXdRbnM/view?usp=sharing

For more about alloy Ui please refer below site.

http://alloyui.com/tutorials/