YUILibrary - Open source JavaScript and CSS for building richly interactive software.
Fork YUI on GitHub
  • Home
  • Gallery
  • Forums
  • YUI 2
  • YUI 3
  • YUI Labs
  • YUI Compressor
  • More
  • Gallery Forums
  • Gallery Stats
  • Gallery Calendar
  • Register
  • Login

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • FAQ
  • Developer FAQ
  • Developer Guide
  • Module Setup

Tag Cloud

slideshow skinnable widget tivac ericf form jafl foxxtrot rgrove io jacobfogg lsmith nzakas plugin event caridy apipkin animation port node davglass yui2 jsonp adam overlay ajax

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
    + 3 -

    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.

    • Tags:
    • murdog05
    • client-side
    • validation
    • validator
    • form
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    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.0/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
                                        }
                                    }
                                ]
                            }
                        );
    });

    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
    YUI Projects
    • All YUI Downloads
    • YUI 2
    • YUI 3
    • YUI Doc
    • YUI Compressor
    • YUILibrary.com
    • YUI Build Tool
    • YUI PHP Loader
    YUI Labs
    • All YUI Labs Projects
    • Yeti
    Pages & Links
    • All YUI Downloads
    • Git FAQ
    • Graded Browser Support
    • Contribute to YUI
    • Forum Stats
    • Gallery Stats
    • YUI Calendar
    Contribute
    • Submit a Bug
    • Request a Feature
    • Write Code
    • Meet the Team
    Follow YUI
    • on GitHub
    • on Twitter
    • on FriendFeed
    • on Facebook
    • on IRC
    • YUI Blog
    • YUI Theater
    • YUI Forums

    © 2010 YUI Library - Site Credits