jquery form validation, jquery.validate all captures

sponsored links
1, preparations to JQuery version: 1.2.6 +, Compatibility 1.3.2

Official website address: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Latest version: 1.5.5
Local Download: jquery.validate.zip
Second, the default validation rules

(1)required:true  Losing field  
(2)remote:"check.php"  Use AJAX method calls  check.php Verify that the input values  
(3)email:true  You must enter a properly formatted email  
(4)url:true  You must enter a properly formatted URL  
(5)date:true  You must enter a properly formatted date  
(6)dateISO:true  You must enter a properly formatted date  (ISO), For example,  :2009-06-23,1998/01/22  Only verifies that the format, does not verify the validity  
(7)number:true  You must enter a valid number  ( A negative number, the decimal  )
(8)digits:true  You must enter an integer  
(9)creditcard:  You must enter a valid credit card number  
(10)equalTo:"#field"  The input value must and  #field The same  
(11)accept:  Enter the name of the owning legal suffix string  ( Upload file suffix  )
(12)maxlength:5  Enter up to five string  ( Chinese character is a character  )
(13)minlength:10  Enter the length of the minimum is 10 string  ( Chinese character is a character  )
(14)rangelength:[5,10]  Enter the length must be between 5 and   10  The string between  ")( Chinese character is a character  )
(15)range:[5,10]  The input value must be between 5 and   10  Between  
(16)max:5  The input value cannot be greater than the  5
(17)min:10  The input value cannot be less than  10

Third, the default prompt

messages : {
        required : "This field is required.",
        remote : "Please fix this field.",
        email : "Please enter a valid email address.",
        url : "Please enter a valid URL.",
        date : "Please enter a valid date.",
        dateISO : "Please enter a valid date (ISO).",
        dateDE : "Bitte geben Sie ein g Mei  ltiges Datum ein.",
        number : "Please enter a valid number.",
        numberDE : "Bitte geben Sie eine Nummer ein.",
        digits : "Please enter only digits",
        creditcard : "Please enter a valid credit card number.",
        equalTo : "Please enter the same value again.",
        accept : "Please enter a value with a valid extension.",
        maxlength : $.validator
                        .format("Please enter no more than {0} characters."),
        minlength : $.validator
                        .format("Please enter at least {0} characters."),
        rangelength : $.validator
                        .format("Please enter a value between {0} and {1} characters long."),
        range : $.validator
                        .format("Please enter a value between {0} and {1}."),
        max : $.validator
                        .format("Please enter a value less than or equal to {0}."),
        min : $.validator
                        .format("Please enter a value greater than or equal to {0}.")

Such as the need to change, can be added in the js code:

jQuery.extend(jQuery.validator.messages, {
        required: " Required fields  ",
        remote: " Please correct the fields  ",
        email: " Please enter a properly formatted email  ",
        url: " Please enter a valid Web address  ",
        date: " Please enter a valid date  ",
        dateISO: " Please enter a valid date   (ISO).",
        number: " Please enter a valid number  ",
        digits: " You can only enter integer  ",
        creditcard: " Please enter a valid credit card number  ",
        equalTo: " Please enter the same value again  ",
        accept: " Please enter the name of the owning legal suffix string  ",
        maxlength: jQuery.validator.format(" Please enter a maximum length   {0}  String  "),
        minlength: jQuery.validator.format(" Please enter a length of at least   {0}  String  "),
        rangelength: jQuery.validator.format(" Please enter a length between   {0}  And   {1}  The string between  "),
        range: jQuery.validator.format(" Please enter a number between   {0}  And   {1}  The values between  "),
        max: jQuery.validator.format(" Please enter a maximum of   {0}  The value of the  "),
        min: jQuery.validator.format(" Please enter a minimum   {0}  The value of the  ")

Recommended practices, this file into messages_cn.js, in the introduction page

4, using the method
1. Will check write control rules

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>$().ready(function() {
<form method="get" action="">
<label for="firstname">Firstname</label>
<input name="firstname" />
<label for="email">E-Mail</label>
<input name="email" />
<label for="password">Password</label>
<input name="password" type="password" />
<label for="confirm_password"> Confirm password  </label>
<input name="confirm_password" type="password" />
<input type="submit" value="Submit"/>

Use class ="{}" way to introduce package: jquery.metadata.js can use the following method, modify the prompt content:
class = "(required: true, minlength: 5, messages: (required: 'Please enter content'))" in the use equalTo keywords, behind the content must be enclosed in quotation marks, the following code:
class = "(required: true, minlength: 5, equalTo: '# password')" in another way, using the keyword: meta (meta-data to use other plug-ins you want to wrap your validation rules in their own projects can be use this special option)
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
For example:

meta: "validate"
<input name="password" type="password" />

Another way:
$. Metadata.setType ("attr", "validate"); so you can use the validate = "(required: true)" way, or class = "required", but the class = "(required: true, minlength: 5) "will not work 2. to write the code validation rules
$ (). Ready (function () (
$ ("# SignupForm"). Validate ((
rules: (
firstname: "required",
email: (
required: true,
email: true
password: (
required: true,
minlength: 5
confirm_password: (
required: true,
minlength: 5,
equalTo: "# password"
messages: (
firstname: "Please enter the name"
email: (
required: "Please enter the Email address"
email: "Please enter a valid email address"
password: (
required: "Please enter your password"
minlength: jQuery.format ("password can not be less than (0) characters")
confirm_password: (
required: "Please enter the confirmation code"
minlength: "Confirm password can not be less than 5 characters"
equalTo: "Two password inconsistencies inconsistency"
});// Messages office, if not a control message, will call the default message
<form method="get" action="">
<label for="firstname"> Firstname </ label>
<input name="firstname" />
</ P>
<label for="email"> E-Mail </ label>
<input name="email" />
</ P>
<label for="password"> Password </ label>
<input name="password" type="password" />
</ P>
<label for="confirm_password"> Confirm Password </ label>
<input name="confirm_password" type="password" />
</ P>
<input type="submit" value="Submit"/>
</ P>
</ Form>

required: true must have a value
required: "# aa: checked" expression is true, you need to verify
required: function () () return true, the table need to verify the back of two types, the form need to fill or not fill the same time elements of five commonly used methods and attention problems
1. By other means instead of the default SUBMIT $ (). Ready (function () (
$ ("# SignupForm"). Validate ((
submitHandler: function (form) (
alert ("submitted");
form.submit ();
Validate the default values can be set, written as follows:
$. Validator.setDefaults ((
submitHandler: function (form) (alert ("submitted!"); form.submit ();)
If you want to submit the form, need to use form.submit () instead of using $ (form). Submit ()
2.debug, if this parameter is true, then the form will not submit, just checking, debugging is very convenient when
$ (). Ready (function () (
$ ("# SignupForm"). Validate ((
debug: true
If a page has multiple forms, with
$. Validator.setDefaults ((
debug: true
3.ignore: ignore some elements do not validate
ignore: ". ignore"
4.errorPlacement: Callback Default: the error message on the validation of the elements specified in the error back to the position by default, is: error.appendTo (element.parent ()); that the error message on the validation of the elements behind
errorPlacement: function (error, element) (
error.appendTo (element.parent ());
) / / Example:
<td> <label for="firstname"> First Name </ label> </ td>
<td> <input name="firstname" type="text" value="" maxlength="100" /> </ td>
<td> </ td>
</ Tr>
<input name="dateformat" type="radio" value="0" />
<label for="dateformat_eu"> 14/02/07 </ label>
</ Td>
<input name="dateformat" type="radio" value="1" />
<label for="dateformat_am"> 02/14/07 </ label>
</ Td>
<td> </ td>
</ Tr>
<td> </ td>
<td colspan="2">
<input type="checkbox" name="terms" />
<label for="terms"> I have read and accept the Terms of Use. </ label>
</ Div>
</ Td>
</ Tr> errorPlacement: function (error, element) (
if (element.is (": radio"))
error.appendTo (element.parent (). next (). next ());
else if (element.is (": checkbox"))
error.appendTo (element.next ());
error.appendTo (element.parent (). next ());
) Function code is: Under normal circumstances the error message displayed in, if that radio displayed, if a checkbox displayed in the content behind the errorClass: String Default: "error"
Specified error of the css class name, you can customize the error style errorElement: String Default: "label"
What is wrong with the tag, the default is the label you can change emerrorContainer: Selector
Show or hide authentication information, you can automatically have an error message appears when the container property into a show, when no error concealment, use less
errorContainer: "# messageBox1, # messageBox2" errorLabelContainer: Selector
The error message is unified in a container inside. wrapper: String
What label on top of errorELement then wrap the three properties generally be used to achieve in a container show all errors function, and no information automatically hide errorContainer: "div.error",
errorLabelContainer: $ ("# signupForm div.error"),
wrapper: "li" error setting the style, can increase the icon shows input.error (border: 1px solid red;)
label.error (
background: url (". / demo / images / unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: # EA5200;
label.checked (
background: url (". / demo / images / checked.gif") no-repeat 0px 0px;
) Success: String, Callback
To verify that the elements of the action through the validation, if with a string, will be treated as a css class can also be a function with
success: function (label) (
/ / Set as text for IE
label.html (""). addClass ("checked");
/ / Label.addClass ("valid"). Text ("Ok!")
Add a "valid" to verify the elements defined in the CSS style
success: "valid" nsubmit: Boolean Default: true
Verify the time of submission. Set the only false to use other methods to verify
onfocusout: Boolean Default: true
Loss of focus is to verify (not including checkboxes / radio buttons)
onkeyup: Boolean Default: true
When the keyup validation.
onclick: Boolean Default: true
Click the checkboxes and radio when the validation
focusInvalid: Boolean Default: true
After the form is submitted, not verified form (submitted prior to the first or the focus of the failed verification form) will be the focus
focusCleanup: Boolean Default: false
If this is true then when the element is not validated when the focus to remove errors. Avoid focusInvalid together with the / / reset form
$ (). Ready (function () (
var validator = $ ("# signupForm"). validate ((
submitHandler: function (form) (
alert ("submitted");
form.submit ();
$ ("# Reset"). Click (function () (
validator.resetForm ();
});}); Remote: URL
Way to use ajax validation, the default will be submitted to the current value to the remote address verification, if submitted to other values, you can use the data options for remote: "check-email.php"
remote: (
url: "check-email.php", / / background processing
type: "post", / / data send mode
dataType: "json", / / accept the data format
data: (/ / data to be passed
username: function () (
return $ ("# username"). val ();
) Remote address only the output "true" or "false", can not have other output addMethod: name, method, message
Custom authentication methods
/ / Two byte characters
jQuery.validator.addMethod ("byteRangeLength", function (value, element, param) (
var length = value.length;
for (var i = 0; i <value.length; i + +) (
if (value.charCodeAt (i)> 127) (
length + +;
return this.optional (element) | | (length> = param [0] & & length <= param [1]);
), $. Validator.format ("Please be sure to enter the value (0) - (1) bytes between (a 2-byte characters count )"));
/ / Postal Code authentication
jQuery.validator.addMethod ("isZipCode", function (value, element) (
var tel = / ^ [0-9] (6) $ /;
return this.optional (element) | | (tel.test (value));
), "Please correctly fill in your zip code");
radio and checkbox, select the required verification that radio must select a
<input type="radio" value="m" name="gender" />
<input type="radio" value="f" name="gender"/> checkbox's required that must be selected
<input type="checkbox" name="agree" /> checkbox of minlength expressed the need to select the minimum number, maxlength that selected the largest number, rangelength: [2,3] that the number of intervals selected
<input type="checkbox" value="email" name="spam[]" />
<input type="checkbox" value="phone" name="spam[]" />
<input type="checkbox" value="mail" name="spam[]" />
select the required selected value that can not be empty
<select name="jungle" title="Please select something!">
<option value=""> </ option>
<option value="1"> Buga </ option>
<option value="2"> Baga </ option>
<option value="3"> Oi </ option>
</ Select> select the minlength that select the minimum number (can be selected in the select), maxlength that selected the largest number, rangelength: [2,3] that the number of intervals selected
<select name="fruit" title="Please select at least two fruits" multiple="multiple">
<option value="b"> Banana </ option>
<option value="a"> Apple </ option>
<option value="p"> Peach </ option>
<option value="t"> Turtle </ option>
</ Select>
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of jquery form validation, jquery.validate all captures

  • Javascript in the browser environment (seven) XMLHttpRequest

    XMLHttpRequest XMLHttpRequest is a function used to create a http request. XHR initial IE through ActiveX objects are realized. After the beginning of the various browsers support. Now AJAX is the popular XMLHttpRequest object to the adoption of the imple

  • Ajax Portal

    The first test procedure: <html> <title>Full use XMLHttpRequest to load the document example </title> <head> <script type='text/javascript'> var req=null; var console=null; var READY_STATE_UNINITIALIZED=0; var READY_STATE_LOA

  • Struts + Spring + Hibernate practice

    Tools: Eclipse3.1, MyEclipse4.03, Tomcat5.5.9, Properties Editor plug-ins, MySql4.1.13 New construction: the name for the login Create Struts framework Create index.jsp, add a link to login.jsp Press Ctrl + N, to create login.jsp, LoginAction, the use of

  • js form validation Guinness

    js form validation Guinness 1. Length <script> function test () ( if (document.abvalue.length> 50) ( alert ( "Can not more than 50 characters!"); document.abfocus (); return false; ) ) </ script> <form name=a onsubmit="ret

  • extjs development environment set up and practice

    1, download and extract the extjs 2, download eclipse and Eclipse AJAX Toolkit Framework (ATF) I have been accustomed to using eclipse as a development environment, a variety of open-source plugin so that eclipse has all-around performance, operating effi

  • ajax overtime

    ajax overtime

  • Msxml2.XMLHTTP version problem

    Projects with an import feature prototype.js of Ajax functionality to update the prompt, the code is very simple, do not have the framework of the background on a jsp to output Text, future use of timers and to update the page Ajax.request encountere ...

  • Depth understanding of the eval function in javascript

    http://wanyij.blog.51cto.com/46570/43794 In this paper, the discovery of an appropriate title is not so easy, huh, huh, so in this note under the first two purposes of this article: (1) introduction of the eval function in javascript usage (2) how to func

  • JS after ajax request return of the problem can not be implemented

    1: Send ajax request, in the onComplete, if back when the html contains a javascript, then these javascrip and will not be realized, it does not mean not to implement. This problem has troubled me for a long time, behind the hair and then put this kn ...

  • JS charts extjs implementation tools can be combined

    OpenFlashChart brief introduction by valensoft 2009-1-10 8:29:00 OpenFlashChart is an open source Flash and Javascript to the technical foundation for the free chart, using it to create some very useful analysis of the effect of the statements of the char

blog comments powered by Disqus
Recent Entries
Tag Cloud
Random Entries