• 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.

    Form Manager (gallery-formmgr) on cdn

    Last Updated: 04/7/13
    + 5 -

    John Lindal

    YUI Contributor

    See 50 more by this user.

    Created: 12/4/09
    Last CDN Push: 04/3/13
    Build Tag: gallery-2013.04.03-19-53
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.5.1
    Free for use.

    HTML forms are complex beasts, requiring insertion of default values when the form is first displayed, possible auto-saving of unvalidated input to protect against connection loss, client-side pre-validation of user input, synchronous/asynchronous submission of user input to the server, and processing and display of the results returned by the server (success or errors). When combined with YUI3 IO, FormMgr supports all of this.

    This module is lightweight because it does not instantiate a separate JavaScript object for each form element. Instead, basic pre-validation configuration is stored in each element's class. Custom pre-validations can be added either by registering a regular expression and/or function for a particular element or by overriding postValidateForm().

    This approach is ideal when implementing progressive enhancement: the form is defined via markup, and FormManager is then used to add functionality when JavaScript is enabled. Even then error message containers are in the markup, and this allows the server to populate them for non-JavaScript clients.

    We refer to client-side checks as "pre-validation" because JavaScript is relatively easy to subvert -- or it might be turned off completely by the user. Only the server can truly validate that the data is acceptable.

    More information is provided in the YUI Blog post: http://www.yuiblog.com/blog/2010/03/23/gallery-form-manager/

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

    Example of creating a FormManager and adding custom validations. Basic validations like required, min/max length, integer, and decimal are encoded in the markup.

    Code Sample

    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    YUI({
        //Last Gallery Build of this module
        gallery: 'gallery-2013.04.03-19-53'
    }).use('gallery-formmgr', function(Y)
    {
    	var f = new Y.FormManager('test_form',
    	{
    		status_node: '#form-status',
    		default_value_map:		// overrides values in markup
    		{
    			s1: 'abc',
    			b1: 1,
    			b2: 0
    		}
    	});
     
    	f.prepareForm();
    	f.initFocus();		// only do this for one form on a page
     
    	// validations
     
    	f.setErrorMessages('email',
    	{
    		required: 'Please tell us how to spam you.  (Just kidding!)',
    		regex:    'Please enter a valid email address.'
    	});
    	f.setRegex('email', /@.+\..+/);		// not trying very hard
     
    	f.setErrorMessages('zip',
    	{
    		regex: 'Please enter a valid US ZIP Code.'
    	});
    	f.setRegex('zip', /^[0-9]{5}(?:-[0-9]{4})?$/);
     
    	f.setFunction('pw', function(form)
    	{
    		if (form.pw.value != form.pw2.value)
    		{
    			f.displayMessage(form.pw, 'Your password entries did not match.', 'error');
    			f.displayMessage(form.pw2, '', 'error');
    			return false;
    		}
     
    		return true;
    	});
     
    	f.postValidateForm = function(form)
    	{
    		var count = 0;
    		Y.each([form.b1, form.b2, form.b3], function(b)
    		{
    			if (b.checked) count++;
    		});
     
    		if (count < 2)
    		{
    			f.displayMessage(form.b1, 'Please select at least two checkboxes.', 'warn');
    			return false;
    		}
     
    		return true;
    	};
    });

    Forum Posts

    Subject Author Date
    Introduction to Form Manager by John Lindal on YUIBlog Eric Miraglia 03/25/10
    override default pre-validation strings Roman Stachura 04/12/10
    Re: override default pre-validation strings Roman Stachura 04/12/10
    Add Canadian Postal Code regEx. Comment only. Huey Brantley 04/13/10
    Re: Add Canadian Postal Code regEx. Comment only. darlenehill19 02/8/11
    Passing in a config object post construction ispyinternet 08/31/12
    Re: Passing in a config object post construction John Lindal 08/31/12
    Re: Passing in a config object post construction ispyinternet 09/3/12
    Re: Passing in a config object post construction John Lindal 09/3/12
    displayFormMessage ispyinternet 09/24/12

    © 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