web developer & system programmer

coder . cl

ramblings and thoughts on programming...

jquery-validators

published: 12-08-2010 / updated: 12-08-2010
by Daniel Molina Wegener
jQuery



overview

jquery-validators is a jQuery plug-in with some predefined validators, but extensible to allow you to create field validations on change and focusout events. The plug-in runs individually for each field, without referring a specific form in the HTML. Also you can define custom validation function and custom messages, currently it supports English and Spanish messages, but you can setup your own messages on it. If the field isn’t valid for the validator, it will block the form identified by the form selector (written as jQuery selector string). The current version is 1.2.



validators

  • integer validator, /[0-9]+/gi expression.
  • float validator, /[0-9]+.[0-9]+/gi expression.
  • letters validator, /[a-z]+/gi expression.
  • alphanum validator, /[a-z0-9]+/gi expression.
  • email validator.
  • alphacode validator, /[0-9a-z._-]+/gi expression.
  • code validator, /[0-9._-]+/gi expression.
  • notempty validator, /^.+$/gi expression.
  • empty validator, /^$/gi expression.
  • rutdv validator, /^[0-9K]$/g expression.
  • selected validator, not empty value and selectedIndex different from zero con select controls.
  • zip validator, /^[0-9]{5,15}$/g expression.
  • zip4 validator, /^[0-9]{4,4}$/g expression.
  • deliverylocation validator, /^[0-9]{2,2}$/g expression.
  • phone validator, +country_code (area_code) phone_number expression.
  • regex validator, custom regular expression validator.
  • http_url validator, validates HTTP urls.
  • ftp_url validator, validates FTP urls.
  • any_url validator, validates URL (URI) urls.
  • twitter_id validator, validates Twitter IDs.
  • iso_timestamp validator, validates ISO Timestamps.
  • iso_date validators, validates ISO Date formats.
  • custom validation messages, custom validation messages.



donations

Support this project by donating through PayPal:





Also I can receive donations in books & hardware, just use the Contact Form to let you know how to donate.



download

SHA1 (jquery-validators-1.2.js.gz) = d0a23d1b2cc493d606263ee9a41b7f456a4ea80f
SHA1 (jquery-validators-1.2.min.js.gz) = cc869294fb4e17b9ec2e0c8f82b4ab1834b40db4



license

The jquery-validators license is BSD License You can use in your closed source application, but if you modify jquery-validators, you are not obligated to publish the changes.

Copyright (c) 2010, Daniel Molina Wegener <dmw@coder.cl>
Copyright (c) 2011, Daniel Molina Wegener <dmw@coder.cl>

http://coder.cl/products/jquery-validators/

All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above copyright
      notice, this list of conditions and the following disclaimer in the
      documentation and/or other materials provided with the distribution.
    * Neither the name of the coder.cl nor the
      names of its contributors may be used to endorse or promote products
      derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL DANIEL MOLINA WEGENER BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.



using jquery-validators

Using jquery-validators is a quite simple:


/* example (invalid) validator */
$('#jquery_selector').addValidator({options,});

/* example validators */
$('#phone_input').addValidator({type: 'phone', allow_empty: true,});
$('#user_rut').addValidator({
    type: 'integer',
    minl: 5000000,
    maxl: 50000000,
});
$('#select_input').addValidator({type: 'notempty',});
$('#user_dv').addValidator({type: 'rutdv',});

function rut_validator(idv) {
    /* validate rut */
}

$('#user_rut, #user_dv').addValidator({
    type: 'custom',
    custom: rut_validator,
    custom_message: 'Rut Invalido',
});

Available option defaults:

  • border_color → ‘#e00′
  • background_color → ‘#900′
  • foreground_color → ‘#fff’
  • border_width → ’2px’
  • messages → _available_messages
  • form_selector → ‘form’
  • form_event → ‘submit’
  • type → ‘notempty’
  • padding → ’2px’
  • margin → ’2px’
  • display → ‘inline’
  • len → false
  • minl → false
  • maxl → false
  • exactlen → false
  • regex → false
  • custom → false
  • language → ‘es’
  • allow_empty → false
  • custom_message → false
  • event → false
border_color
border color for the validation message.
background_color
background color for the validation message.
foreground_color
font color for the validation message.
border_width
border width for the validation message.
messages
message list, see the source code for more details.
form_selector
form selector, as jQuery selector string.
form_event
form event to handle using jQuery bind() operation.
type
validator type, those listed above.
padding
padding on the validation message.
margin
margin on the validation message.
display
display type, inline, block, cell-row, etc.
len
minimum length of control value.
minl
minimum limit for integer and double values.
maxl
maximum limit for integer and double values.
exactlen
requires an exact length for the control value.
regex
regular expression to use with the ‘regex’ validator.
custom
custom validation function to use with ‘custom’ validator.
language
message language, currently it supports English and Spanish.
allow_empty
allow empty values with true, false requires a value.
custom_message
custom validation message, to use with ‘regex’ and ‘custom’ validators.
event
overrides the default focusout and change events to validate the control.



demos

Some jquery-validators examples:


try {
    jQuery(document).ready(function () {
        try {
            jQuery('#phone_validator').addValidator({
                type: 'phone',
                allow_empty: true,
                language: 'en' /* english */
            });

            jQuery('#integer_validator').addValidator({
                type: 'integer',
                allow_empty: false,
                language: 'es' /* spanish */
            });

            jQuery('#float_validator').addValidator({
                type: 'float',
                allow_empty: false,
                language: 'en' /* english */
            });

            jQuery('#form_select').addValidator({
                type: 'float',
                allow_empty: false,
                form_selector: '#my_custom_form'
            });

            jQuery('#hex_validator').addValidator({
                type: 'regex',
                allow_empty: false,
                regex: /^0x([0-9a-f]{4,4})$/
            });
        } catch (e) {
            alert(e.message);
        }
    });
} catch (e) {
    alert(e.message);
}
  • #phone_validator:
  • #integer_validator:
  • #float_validator:
  • #form_select:
  • #hex_validator: