#####################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:

Advertisements

Comments on: "form Validation using AUI(Alloy User Interface) script" (5)

  1. fylygis said:

    As a Newbie, I am constantly searching online for articles that can be of assistance to me. Thank you’s a Very good, very useful to me, Thank you very much post.

  2. carin_htinha said:

    really an amazing article to read.
    lista de emails

  3. Prathibha h m:
    Hi ALL,

    Can anybody provide a sample code for aui-form-validator. I want to validate the form fields for mandatory condition.Please share the code , it will be very helpful.

    Thanks in advance.
    Regards,
    Prathibha

    Hi Prathibha,

    please find a sample code for aui-form-validator in this link
    https://rajeevalochanabr.wordpress.com/2012/08/20/validation-using-auialloy-user-interface-script-and-html-form/Hope it will help you..!!

    Thanks & Regards,
    Vishal R. Panchal

  4. cassia_cerqueira said:

    This is a really interesting article.

    Thanks.
    Cassia

  5. Daniel said:

    Thanks Raj.
    Your article helped me understand AlloyUI form validation.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: