Gallery

Modules

Documentation

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.

Form Validator (gallery-formvalidator) on cdn

Last Updated: 05/22/10

+ 5 -

Murray Macchio

YUI Contributor

Created: 11/10/09
Last CDN Push: 06/9/10
Build Tag: gallery-2010.06.09-20-45
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.1
Free for use.

This non-instrusive component will change your regular forms into highly interactive forms. Fields filled in incorrectly will be highlighted as incorrect, while inputs filled in properly will be shown as correct. Fully customizable, use your own CSS to mark fields as valid or invalid.

Main features include

Dynamic creation of field indicators (valid/invalid)
Define your form's validation with JSON, or with inline HTML attributes
Integrates easily with any AJAX module for asynchronous form submission.
Has fully customizable password entry field which will require a minimum strength of password
Custom inputs where you define your own functions.
Regular expression support.

See full documentation here
http://murdog05.github.com/yui3-gallery/docs/module_validator.html

UPDATE: Added feature to allow for instructions to pop up as user types.

Below is for a simple html page in which you want the form validator to do all the work. It will create all the validators. See here for example

http://murdog05.github.com/yui3-gallery/examples/json/dynamicValidatorsExample.html

See the inline equivalent here

http://murdog05.github.com/yui3-gallery/examples/inline/dynamicValidatorsExample.html

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.06.09-20-45'
}).use('gallery-formvalidator', function(Y) {
             var form2 = new Y.Validator(
                        {
                            form:'basicExample2',
                            defaultIndicatorDomType:'DIV',
                            defaultIncorrectIndicatorCss:'validator',
                            defaultCorrectIndicatorCss:'indicator',
                            createCorrectIndicator:true,
                            createIncorrectIndicator:true,
                            correctIndicatorText:'<span class="indicator"> </span>',
                            incorrectIndicatorText:'<span class="validator"> </span>',
                            fieldJSON:[
                                {
                                    type:Y.TextBaseField,
                                    atts:{
                                        inputDOM:'firstName2'
                                    }
                                },
                                {
                                    type:Y.TextBaseField,
                                    atts:{inputDOM:'lastName2'}
                                },
                                                                {
                                    type:Y.DoubleField,
                                    atts:{
                                        inputDOM:'income2',
                                        max:40000.00,
                                        maxDecimalPlaces:2
                                    }
                                },
                                {
                                    type:Y.IntegerField,
                                    atts:{
                                        inputDOM:'age2',
                                        max:100,
                                        min:10
                                    }
                                }
                            ]
                        }
                    );
});

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.06.09-20-45'
}).use('gallery-formvalidator', function(Y) {
             var form2 = new Y.Validator(
                        {
                            form:'basicExample2',
                            defaultIndicatorDomType:'DIV',
                            defaultIncorrectIndicatorCss:'validator',
                            defaultCorrectIndicatorCss:'indicator',
                            createCorrectIndicator:true,
                            createIncorrectIndicator:true,
                            correctIndicatorText:'<span class="indicator"> </span>',
                            incorrectIndicatorText:'<span class="validator"> </span>',
                            fieldJSON:[
                                {
                                    type:Y.TextBaseField,
                                    atts:{
                                        inputDOM:'firstName2'
                                    }
                                },
                                {
                                    type:Y.TextBaseField,
                                    atts:{inputDOM:'lastName2'}
                                },
                                                                {
                                    type:Y.DoubleField,
                                    atts:{
                                        inputDOM:'income2',
                                        max:40000.00,
                                        maxDecimalPlaces:2
                                    }
                                },
                                {
                                    type:Y.IntegerField,
                                    atts:{
                                        inputDOM:'age2',
                                        max:100,
                                        min:10
                                    }
                                }
                            ]
                        }
                    );
});

Forum Posts

Subject	Author	Date
Any comments suggestions or feedback	Murray Macchio	11/25/09
Re: Any comments suggestions or feedback	Murray Macchio	11/25/09
Re: Any comments suggestions or feedback	Eric Miraglia	11/25/09
Re: Any comments suggestions or feedback	logemann	04/2/10
Re: Any comments suggestions or feedback	Murray Macchio	04/3/10
Re: Any comments suggestions or feedback	John Lindal	05/27/10
Re: Any comments suggestions or feedback	Murray Macchio	05/27/10
Y.DOM.insertAfter()	Brian DeRocher	06/6/10
Re: Y.DOM.insertAfter()	Murray Macchio	06/7/10
Dynamic forms & form validator	James Brisland	02/1/11