• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • API Docs
    • Environments
    • Tutorials
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • Shifter »
    • Yogi »
    • YUI 2
    • YUI Doc »
    • YUI Test
    • YUI Website
    • YUI Compressor »
    • YUI Builder »
    • YUI PHP Loader
    • Grid Builder »
    • Skin Builder »
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • Yogi Documentation
  • Shifter Documentation
  • Developer Guide
  • Module Setup

Tag Cloud

Context Navigation

    YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

    AlloyUI Form Validator (gallery-aui-form-validator) on cdn

    Last Updated: 06/6/10
    + 0 -

    Liferay, Inc.

    See 69 more by this user.

    Created: 06/2/10
    Last CDN Push: 08/18/10
    Build Tag: gallery-2010.08.18-17-12
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.1.1
    Free for use.

    An extensive client-side form validation framework for validating form fields and providing feedback to the end user.
    Allows for easily configuring validating email addresses, phone numbers, dates, required fields, as well as many extensive customization options.

    Validation rules can also be extracted from the HTML markup via CSS classes passed on the form fields.

    • Tags:
    • form
    • validation
    • liferay
    • alloyui
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    To view all available events and configuration attributes, view the documentation.
    The basic FormValidator example assumes a form marked up like so:
    <form action="" id="fm1" name="fm1">
    <fieldset>
    <p class="aui-field">
    <label class="aui-field-label" for="name2">Name:</label>
    <input type="text" name="name" id="name2" />
    </p>
    <p>
    <label class="aui-field-label" for="email2">Email:</label>
    <input type="text" name="email" id="email2" />
    </p>
    <p>
    <label class="aui-field-label" for="age2">Age:</label>
    <input type="text" name="age" id="age2" />
    </p>
    <p>
    <label class="aui-field-label" for="url2">URL:</label>
    <input type="text" name="url" id="url2" />
    </p>

    <p>
    <input class="aui-button-input" type="submit" value="Submit" />
    <input class="aui-button-input" type="reset" value="Reset" />
    </p>
    </fieldset>
    </form>

    You can configure form validation like so:

    Code Sample

    <script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
    YUI({
        //Last Gallery Build of this module
        gallery: 'gallery-2010.08.18-17-12',
        modules: {
            'gallery-aui-skin-base': {
                fullpath: 'http://yui.yahooapis.com/gallery-2010.08.18-17-12/build/gallery-aui-skin-base/css/gallery-aui-skin-base-min.css',
                type: 'css'
            },
            'gallery-aui-skin-classic': {
                fullpath: 'http://yui.yahooapis.com/gallery-2010.08.18-17-12/build/gallery-aui-skin-classic/css/gallery-aui-skin-classic-min.css',
                type: 'css',
                requires: ['gallery-aui-skin-base']
            }
        }
    }).use('gallery-aui-form-validator', function(Y) {
    	// Creating a basic Validator with the form below
    	var validator1 = new Y.FormValidator({
    		boundingBox: '#fm1',
     
    		rules: {
    			name: {
    				required: true,
    			},
    			email: {
    				required: true,
    				email: true
    			},
    			age: {
    				required: true,
    				digits: true,
    				range: [18, 50]
    			},
    			url: {
    				url: true
    			}
    		}
    	});
     
    	// Listening to validation events
    	validator1.on('validateField', function(event) {
    		// Fires when a field is evaluated
    	});
    	validator1.on('validField', function(event) {
    		// Fires when a field contains valid data
    	});
     
    	validator1.on('errorField', function(event) {
    		// Fires when a field contains invalid data
    	});
     
    });

    Forum Posts

    Subject Author Date
    Why? John Lindal 06/9/10
    Re: Why? Murray Macchio 06/10/10
    Re: Why? Murray Macchio 06/10/10
    Styling Eike Hirsch 06/11/10
    Re: Why? Eduardo Lundgren 06/11/10
    Re: Styling Eduardo Lundgren 06/11/10
    Re: Why? Murray Macchio 06/11/10
    Re: Why? Eduardo Lundgren 06/11/10
    Re: Styling Eike Hirsch 06/14/10
    Parallel thinking Peter Peterson 06/15/10

    © 2006-2013 Yahoo! Inc. All rights reserved.
    All code on this site is licensed under the BSD License unless stated otherwise.
    About This Site · Security Contact Info