Liferay, Inc.![]()
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.
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:
<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
});
});| 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