Archive for August, 2012

AUI form Validation using AUI script

Sample example


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

<aui:form name="fm2" action="" method="post">
<table>
<tr>
<td>
<aui:input name="number" value='${number}' label="Enter number#" inlineLabel="left"/>
</td>
<td>
<aui:button type="submit" name="numberSearch" value="Number Search" />
</td>
</tr>
</table>
</aui:form>


<aui:script>
AUI().ready('aui-form-validator', 'aui-overlay-context-panel', function(A) {

// Extending Alloy Default values for FormValidator STRINGS and RULES
A.mix(
YUI.AUI.defaults.FormValidator.STRINGS,
{
customRule: 'Please enter number only.'
},
true
);

A.mix(
YUI.AUI.defaults.FormValidator.RULES,
{
customRule: function(val, fieldNode, ruleValue) {
return (!isNaN(val));
}
},
true
);

var validator1 = new A.FormValidator({
boundingBox: '#fm2',
validateOnBlur: true,
selectText: true,
rules: {
<portlet:namespace />number: {
required: true,
rangeLength: ['4','10'],
customRule:true
}
},
fieldStrings: {
<portlet:namespace />number: {
required: ' Number is a required field'
}

on: {
submit: function(event) {
var formEvent = event.validator.formEvent;
}
}
});
});

</aui:script>

Advertisements

form Validation using AUI(Alloy User Interface) script

#####################Rules extracted from CSS classes#####################

Copy paste the below CSS code inside <head> tag.

<style type="text/css">

fieldset {
border: 1px solid #CCCCCC;
margin: 10px;
padding: 10px;
font-size: 13px;
}

legend {
font-size: 20px;
font-weight: bold;
}

input[type=text], textarea, select {
border: 1px solid #777;
padding: 3px;
}

.aui-form-validator-stack-error {
color: red;
display: block;
font-weight: normal;
font-style: italic;
margin: 3px 0;
}

.aui-form-validator-error-container {}
.aui-form-validator-valid-container {}

.aui-form-validator-error {
background: lightPink;
}

.aui-form-validator-valid {
background: lightGreen;
}
</style>

Add the below code in <body> tag.


<h1>Liferay AUI - FormValidator</h1>

<form id="fm1" action="" name="fm1">
<fieldset><legend>Example 1 - Rules extracted from CSS classes</legend>
<p class="aui-field"><label class="aui-field-label" for="name2">Name:</label>
<input id="name2" class="aui-field-required" type="text" name="name" /></p>
<label class="aui-field-label" for="email2">Email:</label>
<input id="email2" class="aui-field-required aui-field-email" type="text" name="email" />

<label class="aui-field-label" for="age2">Age:</label>
<input id="age2" class="aui-field-digits" type="text" name="age" /></fieldset>

<p>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</p>
</form>

Add the below script code after the </form> tag.


<aui:script>
AUI().ready('aui-form-validator', 'aui-overlay-context-panel', function(A) {

var validator1 = new A.FormValidator({
boundingBox: '#fm1',
});

on: {
submitError: function(event) {
var formEvent = event.validator.formEvent;
var errors = event.validator.errors;
},

submit: function(event) {
var formEvent = event.validator.formEvent;
}
}
});
});
</aui:script>

checkPoint:

#####################Rules passed on the constructor#####################
<form action="" name="fm2">
<fieldset id="simpleForm">
<legend>Example 2 - Rules passed on the constructor</legend>
<p>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
</p>
<p>
<label for="email">Email:</label>
<input type="text" name="email" id="email" />
</p>
<p>
<label for="age">Age:</label>
<input type="text" name="age" id="age" />
</p>

<p>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</p>
</fieldset>
</form>

Add the below script code after the </form> tag.

<aui:script>

AUI().ready('aui-form-validator', 'aui-overlay-context-panel', function(A) {

    //custom Rules
    A.mix(
        YUI.AUI.defaults.FormValidator.STRINGS,
        {
            customRule: 'Type the number 55.',
        },
        true
    );

    A.mix(
        YUI.AUI.defaults.FormValidator.RULES,
        {
            customRule: function(val, fieldNode, ruleValue) {
                return (val == 55);
            }        
        },
        true
    );

    var validator2 = new A.FormValidator({
        boundingBox: document.fm2,

        fieldContainer: 'p',
        rules: {

            age: {
                customRule: true,
                digits: true,
                range: [18, 50]
                // min: 18,
                // max: 50
            },

            email: {
                required: true,
                email: true
            },

            name: {
                required: true,
                rangeLength: [2,50]
            }
        },

        //custom message
        fieldStrings: {
            email: {
                email: 'Type your email in this field.'
            },
            name: {
                required: 'Required field with a custom message.'
            }
        },

        on: {
            submitError: function(event) {
                var formEvent = event.validator.formEvent;
                var errors = event.validator.errors;
            },

            submit: function(event) {
                var formEvent = event.validator.formEvent;
            }
        }
    });
});

</aui:script>

Checkpoint: