JQuery Notes (form validation)

JQuery Form Validation

jquery.validate.js is a jquery's validation plug-in, with the advantage of jquery, we can quickly verify that some of the common input, and can expand their own authentication methods.

For example, there is such a form:

view plaincopy to clipboardprint?
<form method="get" action="">
<fieldset>
<legend> Validating a complete form </ legend>
<p>
<label for="firstname"> Firstname </ label>
<input name="firstname"/>
</ P>
<p>
<label for="lastname"> Lastname </ label>
<input name="lastname" />
</ P>
<p>
<label for="username"> Username </ label>
<input name="username" />
</ P>
<p>
<label for="password"> Password </ label>
<input name="password" type="password" />
</ P>
<p>
<label for="confirm_password"> Confirm password </ label>
<input name="confirm_password" type="password" />
</ P>
<p>
<label for="email"> Email </ label>
<input name="email" />
</ P>
<p>
<input type="submit" value="Submit"/>
</ P>
</ Fieldset>
</ Form>
<form method="get" action="">
<fieldset>
<legend> Validating a complete form </ legend>
<p>
<label for="firstname"> Firstname </ label>
<input name="firstname"/>
</ P>
<p>
<label for="lastname"> Lastname </ label>
<input name="lastname" />
</ P>
<p>
<label for="username"> Username </ label>
<input name="username" />
</ P>
<p>
<label for="password"> Password </ label>
<input name="password" type="password" />
</ P>
<p>
<label for="confirm_password"> Confirm password </ label>
<input name="confirm_password" type="password" />
</ P>
<p>
<label for="email"> Email </ label>
<input name="email" />
</ P>
<p>
<input type="submit" value="Submit"/>
</ P>
</ Fieldset>
</ Form>

In this form, famous last name, user name, password, confirm the password and email. They are non-empty and needs to be properly formatted e-mail address, password and password confirm the same. JQuery validation using the easiest way is to introduce jquery.js and jquery validation.js two js files. Then add the class at the input:

view plaincopy to clipboardprint?
<input name="firstname"/>
<input name="lastname"/>
<input name="username"/>
<input name="password" type="password"/>
<input name="confirm_password" type="password" equalTo="#password"/>
<input name="email"/>
<input name="firstname"/>
<input name="lastname"/>
<input name="username"/>
<input name="password" type="password"/>
<input name="confirm_password" type="password" equalTo="#password"/>
<input name="email"/>

The following list comes default validation validate

required: "Required field",

remote: "Please correct the field,"

email: "Please enter a valid e-mail format"

url: "Please enter a valid URL"

date: "Please enter a valid date"

dateISO: "Please enter a valid date (ISO).",

number: "Please enter a valid number",

digits: "can only enter integer"

creditcard: "Please enter a valid credit card number,"

equalTo: "Please re-enter the same value"

accept: "Please enter a valid string extension"

maxlength: jQuery.format ("Please enter a maximum length of the string is {0}")

minlength: jQuery.format ("Please enter a minimum length of the string is {0}")

rangelength: jQuery.format ("Please enter a length of between {0} and {1} string")

range: jQuery.format ("Please enter a number between {0} and {1} value"),

max: jQuery.format ("Please enter a maximum value of {0}")

min: jQuery.format ("Please enter a minimum value of {0}")

Then, read the document of the event, add the following method:
<script>
$ (Document). Ready (function () {
$ ("# SignupForm"). Validate ();
}
</ Script>

Thus, the time when the form is submitted, it will input the specified class according to the verified. If it fails, form submission will be blocked. Also, the message displayed on the input of the back.

However, this does not feel right, because the validation rules invade our html code. Another way is to use the "rules". We will verify the input of those with class removed. And then modify the document's ready Incident Response Code:

$ (Document). Ready (function () {

$ ("# SignupForm"). Validate ({

rules: {

firstname: "required",

lastname: "required",

username: "required",

password: "required",

confirm_password: {

required: true,

equalTo: "# password"

}

email: {

required: true,

email: true

}

}

});

})

This way, it can achieve the same effect.
So, took the problem is the error message displayed is the default. We need to use a custom prompt:

$ (Document). Ready (function () {

$ ("# SignupForm"). Validate ({

rules: {

firstname: "required",

lastname: "required",

username: "required",

password: "required",

confirm_password: {

required: true,

equalTo: "# password"

}

email: {

required: true,

email: true

}

}

messages: {

firstname: "required"

lastname: "required"

username: "required"

password: "required"

confirm_password: {

required: "Required"

equalTo: "passwords do not match"

}

email: {

required: "Required"

email: "format error"

}

}

});

})

If you want displayed in the error message on the particular style (such as the font to red) can be by adding:

<style type="text/css">

# SignupForm label.error {

padding-left: 16px;

margin-left: 2px;

color: red;

background: url (img / unchecked.gif) no-repeat 0px 0px;

}

</ Style>

Continue adding the length of the password validation rules:

$ (Document). Ready (function () {

$ ("# SignupForm"). Validate ({

rules: {

firstname: "required",

lastname: "required",

username: "required",

password: {

required: true,

minlength: 4,

maxlength: 15

}

confirm_password: {

required: true,

equalTo: "# password"

}

email: {

required: true,

email: true

}

}

messages: {

firstname: "required"

lastname: "required"

username: "required"

password: {

required: "Required"

minlength: jQuery.format ("Password length less than {0} bit")

maxlength: jQuery.format ("password length does not exceed {0} bits")

}

confirm_password: {

required: "Required"

equalTo: "passwords do not match"

}

email: {

required: "Required"

email: "format error"

}

}

});

})

Using the remote

You can specify the trigger event means-tested (Available values keyup (each keypress), blur (when the control loses focus), do not specify when the submit button only when you press the trigger)

$ (Document). Ready (function () {

$ ("# SignupForm"). Validate ({

event: "keyup" | | "blur"

})

})

If debug is true then by specifying the form will not only be used to validate the submission (the default is submitted), can be used to debug

$ (Document). Ready (function () {

$ ("# SignupForm"). Validate ({

debug: true

})

})

If you need to before submitting some custom processing parameters used submitHandler

$ (Document). Ready (function () {

$ ("# SignupForm"). Validate ({

SubmitHandler: function () {

alert ("success");

}

})

})

JQuery Notes (form validation) Second Collection

Verification:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"

"Http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<!--< Style> label.valid {
background: url ('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
height: 16px;
width: 16px;
display: block;
position: absolute;
top: 4px;
left: 152px;
} </ Style> ->

<script src="http://code.jquery.com/jquery-latest.js"> </ script>

<Script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"> </ script>

<Script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"> </ script>

<script type="text/javascript">
jQuery.validator.setDefaults ({
debug: true,
success: "valid"
});;
</ Script>
<script>
$ (Document). Ready (function () {
/ / 1
$ ("# Myform"). Validate ({
rules: {
fruit: "required"
}
errorPlacement: function (error, element) {
/ / If (element.is (": radio"))
error.appendTo (element.parent ());
}
});

/ / 2
$ ("# Myinput"). Rules (
"Add",
{
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.format ("Please, at least {0} characters are necessary")
}
}
);

/ / 3
$ (": Radio"). Each (function () {
$ (This). Rules ("add", {
required: true,
minlength: 2,
messages: {
required: "Required input required"
minlength: jQuery.format ("Please, at least {0} characters are necessary")
}
}
)
});
});

</ Script>

</ Head>

<body>
<form>
<table border="1">
<tr>
<td>
<label for="fruit">
Please select a fruit
</ Label>
</ Td>
<td>
<select name="fruit" title="Please select something!">
<option value=""> </ option>
<option value="1">
Banana
</ Option>
<option value="2">
Apple
</ Option>
<option value="3">
Peach
</ Option>
</ Select>
</ Td>
</ Tr>
<tr>
<td>
<input type="text" />
</ Td>
<td>
<input type="submit" value="submit!" />
</ Td>
</ Tr>
<tr>
<td>
<input type="radio" name="radio3">
radio3
<input type="radio" name="radio3">
radio3
</ Td>
</ Tr>
<tr>
<td>
<input type="radio" name="radio2">
radio2
<input type="radio" name="radio2">
radio2
</ Td>
</ Tr>
<tr>
<td>
<input type="radio" name="radio1">
radio1
<input type="radio" name="radio1">
radio1
</ Td>
</ Tr>
</ Table>
</ Form>
</ Body>
</ Html>

Reference: http://docs.jquery.com/Plugins/Validation

rules () Returns: Options
Return the validations rules for the first selected element.
rules ("add", rules) Returns: Options

JQuery Notes (form validation) III Collection
Test for jQuery validate () plugin

<Type = "text / javascript">

jQuery Validation Plugin Demo
Login Form
Username

Password

Back to the home page query-plugin-validation: | Download | Changelog | Demos | Documentation

Click [Login] after the following chart:

Code errorcontainer-demo_1.html

view plaincopy to clipboardprint?
<? Xml version = "1.0" encoding = "ISO-8859-1"?>
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Test for jQuery validate () plugin </ title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"> </ mce: script>
<Mce: script type = "text / javascript" src = "http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src = "http://dev.jquery .com / view / trunk / plugins / validate / lib / jquery.delegate.js "> </ mce: script>
<Mce: script type = "text / javascript" src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src = "http://dev.jquery.com / view / trunk / plugins / validate / jquery.validate.js "> </ mce: script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"> </ mce: script>
<mce:style type="text/css"> <! -
/ *
. Cmxform fieldset p.error label {color: red;}
div.container {
background-color: # eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container {display: none}
. Container label.error {
display: inline;
} * /
form.cmxform {width: 30em;}
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
--></ Mce: style> <style type="text/css" mce_bogus="1"> / *
. Cmxform fieldset p.error label {color: red;}
div.container {
background-color: # eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container {display: none}
. Container label.error {
display: inline;
} * /
form.cmxform {width: 30em;}
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
} </ Style>
<mce:script type="text/javascript"> <! -
/ / Only for demo purposes
$. Validator.setDefaults ({
submitHandler: function () {
alert ("submitted! (skipping validation for cancel button)");
}
});
$ (). Ready (function () {
$ ("# Form1"). Validate ({
errorLabelContainer: $ ("# form1 div.error")
});

/ *
var container = $ ('div.container');
/ / Validate the form when it is submitted
var validator = $ ("# form2"). validate ({
errorContainer: container,
errorLabelContainer: $ ("ol", container),
wrapper: 'li',
meta: "validate"
});
* /

$ (". Cancel"). Click (function () {
validator.resetForm ();
});
});
/ / --></ Mce: script>
</ Head>
<body>
<h1> <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/"> jQuery Validation Plugin </ a> Demo </ h1>
<div>
<form method="get" action="">
<fieldset>
<legend> Login Form </ legend>
<p>
<label> Username </ label>
<input name="user" title="Please enter your username (at least 3 characters)" />
</ P>
<p>
<label> Password </ label>
<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" />
</ P>
<div>
</ Div>
<p>
<input type="submit" value="Login"/>
</ P>
</ Fieldset>
</ Form>
<! - Our error container ->
<!--< Div>
<h4> There are serious errors in your form submission, please see below for details. </ h4>
<ol>
<li> <label for="email"> Please enter your email address </ label> </ li>
<li> <label for="phone"> Please enter your phone <b> number </ b> (between 2 and 8 characters) </ label> </ li>
<li> <label for="address"> Please enter your address (at least 3 characters) </ label> </ li>
<li> <label for="avatar"> Please select an image (png, jpg, jpeg, gif) </ label> </ li>
<li> <label for="cv"> Please select a document (doc, docx, txt, pdf) </ label> </ li>
</ Ol>
</ Div> ->
<!--< Form method = "get" action = "">
<fieldset>
<legend> Validating a complete form </ legend>
<p>
<label for="email"> Email </ label>
<input name="email" />
</ P>
<p>
<label for="agree"> Favorite Color </ label>
<select name="color" title="Please select your favorite color!">
<option> </ option>
<option> Red </ option>
<option> Blue </ option>
<option> Yellow </ option>
</ Select>
</ P>
<p>
<label for="phone"> Phone </ label>
<input name="phone""some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
</ P>
<p>
<label for="address"> Address </ label>
<input name="address" />
</ P>
<p>
<label for="avatar"> Avatar </ label>
<input type="file" name="avatar" />
</ P>
<p>
<label for="agree"> Please agree to our policy </ label>
<input type="checkbox" title="Please agree to our policy!" name="agree" />
</ P>
<p>
<label for="cv"> CV </ label>
<input type="file" name="cv""{validate:{required:true,accept:'docx?|txt|pdf'}}" />
</ P>
<p>
<input type="submit" value="Submit"/>
<input type="submit" value="Cancel"/>
</ P>
</ Fieldset>
</ Form> ->
<!--< Div>
<h4> There are serious errors in your form submission, please see details above the form! </ h4>
</ Div> ->
<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/"> Back to Home query-plugin-validation: </ a>
| <A href = "http://jquery.bassistance.de/validate/jquery.validate.zip" mce_href = "http://jquery.bassistance.de/validate/jquery.validate.zip" title = "zip- Archive with source code, minified and packed version, demos and examples "> download </ a>
| <a Href="http://jquery.bassistance.de/validate/changelog.txt" mce_href="http://jquery.bassistance.de/validate/changelog.txt"> Changelog </ a>
| <a Href="http://jquery.bassistance.de/validate/demo/" mce_href="http://jquery.bassistance.de/validate/demo/"> Demos </ a>
| <a Href="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation"> Documentation </ a>
</ Div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </ mce: script>
<mce:script type="text/javascript"> <! -
_uacct = "UA-2623402-1";
urchinTracker ();
/ / --></ Mce: script>
</ Body>
</ Html>

JQuery Notes (form validation) collection of four errorcontainer-demo_2.html
Test for jQuery validate () plugin

<Type = "text / javascript">

jQuery Validation Plugin Demo
There are serious errors in your form submission, please see below for details.
Please enter your email address
Please enter your phone number (between 2 and 8 characters)
Please enter your address (at least 3 characters)
Please select an image (png, jpg, jpeg, gif)
Please select a document (doc, docx, txt, pdf)
Validating a complete form
Email

Favorite Color Red Blue Yellow

Phone

Address

Avatar

Please agree to our policy

CV

There are serious errors in your form submission, please see details above the form!
Back to the home page query-plugin-validation: | Download | Changelog | Demos | Documentation

Code errorcontainer-demo_2.html

view plaincopy to clipboardprint?
<? Xml version = "1.0" encoding = "ISO-8859-1"?>
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Test for jQuery validate () plugin </ title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />
<mce:script src="../lib/jquery.js" mce_src="lib/jquery.js" type="text/javascript"> </ mce: script>
<mce:script src="../lib/jquery.metadata.js" mce_src="lib/jquery.metadata.js" type="text/javascript"> </ mce: script>
<mce:script src="../jquery.validate.js" mce_src="jquery.validate.js" type="text/javascript"> </ mce: script>
<! -
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"> </ mce: script>
<Mce: script type = "text / javascript" src = "http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src = "http://dev.jquery .com / view / trunk / plugins / validate / lib / jquery.delegate.js "> </ mce: script>
<Mce: script type = "text / javascript" src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src = "http://dev.jquery.com / view / trunk / plugins / validate / jquery.validate.js "> </ mce: script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"> </ mce: script>
-> <mce:style Type="text/css"> <! -
/ *
. Cmxform fieldset p.error label {color: red;} * /
div.container {
background-color: # eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container {display: none}
/ *
. Container label.error {
display: inline;
}
* /
/ *
form.cmxform {width: 30em;}
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
* /
--></ Mce: style> <style type="text/css" mce_bogus="1"> / *
. Cmxform fieldset p.error label {color: red;} * /
div.container {
background-color: # eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container {display: none}
/ *
. Container label.error {
display: inline;
}
* /
/ *
form.cmxform {width: 30em;}
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
* / </ Style>
<mce:script type="text/javascript"> <! -
/ / Only for demo purposes
$. Validator.setDefaults ({
submitHandler: function () {
alert ("submitted! (skipping validation for cancel button)");
}
});
$ (). Ready (function () {

/*$("# Form1 "). Validate ({
errorLabelContainer: $ ("# form1 div.error")
});*/

var container = $ ('div.container');
/ / Validate the form when it is submitted
var validator = $ ("# form2"). validate ({
errorContainer: container,
errorLabelContainer: $ ("ol", container),
wrapper: 'li',
meta: "validate"
});

$ (". Cancel"). Click (function () {
validator.resetForm ();
});
});
/ / --></ Mce: script>
</ Head>
<body>
<h1> <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/"> jQuery Validation Plugin </ a> Demo </ h1>
<div>
<!--< Form method = "get" action = "">
<fieldset>
<legend> Login Form </ legend>
<p>
<label> Username </ label>
<input name="user" title="Please enter your username (at least 3 characters)" />
</ P>
<p>
<label> Password </ label>
<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" />
</ P>
<div>
</ Div>
<p>
<input type="submit" value="Login"/>
</ P>
</ Fieldset>
</ Form> ->
<! - Our error container ->
<div>
<h4> There are serious errors in your form submission, please see below for details. </ h4>
<ol>
<li> <label for="email"> Please enter your email address </ label> </ li>
<li> <label for="phone"> Please enter your phone <b> number </ b> (between 2 and 8 characters) </ label> </ li>
<li> <label for="address"> Please enter your address (at least 3 characters) </ label> </ li>
<li> <label for="avatar"> Please select an image (png, jpg, jpeg, gif) </ label> </ li>
<li> <label for="cv"> Please select a document (doc, docx, txt, pdf) </ label> </ li>
</ Ol>
</ Div>
<form method="get" action="">
<fieldset>
<legend> Validating a complete form </ legend>
<p>
<label for="email"> Email </ label>
<input name="email" />
</ P>
<p>
<label for="agree"> Favorite Color </ label>
<select name="color" title="Please select your favorite color!">
<option> </ option>
<option> Red </ option>
<option> Blue </ option>
<option> Yellow </ option>
</ Select>
</ P>
<p>
<label for="phone"> Phone </ label>
<input name="phone""some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
</ P>
<p>
<label for="address"> Address </ label>
<input name="address" />
</ P>
<p>
<label for="avatar"> Avatar </ label>
<input type="file" name="avatar" />
</ P>
<p>
<label for="agree"> Please agree to our policy </ label>
<input type="checkbox" title="Please agree to our policy!" name="agree" />
</ P>
<p>
<label for="cv"> CV </ label>
<input type="file" name="cv""{validate:{required:true,accept:'docx?|txt|pdf'}}" />
</ P>
<p>
<input type="submit" value="Submit"/>
<input type="submit" value="Cancel"/>
</ P>
</ Fieldset>
</ Form>
<div>
<h4> There are serious errors in your form submission, please see details above the form! </ h4>
</ Div>
<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/"> Back to Home query-plugin-validation: </ a>
| <A href = "http://jquery.bassistance.de/validate/jquery.validate.zip" mce_href = "http://jquery.bassistance.de/validate/jquery.validate.zip" title = "zip- Archive with source code, minified and packed version, demos and examples "> download </ a>
| <a Href="http://jquery.bassistance.de/validate/changelog.txt" mce_href="http://jquery.bassistance.de/validate/changelog.txt"> Changelog </ a>
| <a Href="http://jquery.bassistance.de/validate/demo/" mce_href="http://jquery.bassistance.de/validate/demo/"> Demos </ a>
| <a Href="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation"> Documentation </ a>
</ Div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </ mce: script>
<mce:script type="text/javascript"> <! -
_uacct = "UA-2623402-1";
urchinTracker ();
/ / --></ Mce: script>
</ Body>
</ Html>
<? Xml version = "1.0" encoding = "ISO-8859-1"?>
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Test for jQuery validate () plugin </ title>
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" mce_href="css/screen.css" />
<mce:script src="../lib/jquery.js" mce_src="lib/jquery.js" type="text/javascript"> </ mce: script>
<mce:script src="../lib/jquery.metadata.js" mce_src="lib/jquery.metadata.js" type="text/javascript"> </ mce: script>
<mce:script src="../jquery.validate.js" mce_src="jquery.validate.js" type="text/javascript"> </ mce: script>
<! -
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"> </ mce: script>
<Mce: script type = "text / javascript" src = "http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js" mce_src = "http://dev.jquery .com / view / trunk / plugins / validate / lib / jquery.delegate.js "> </ mce: script>
<Mce: script type = "text / javascript" src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js" mce_src = "http://dev.jquery.com / view / trunk / plugins / validate / jquery.validate.js "> </ mce: script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"> </ mce: script>
-> <mce:style Type="text/css"> <! -
/ *
. Cmxform fieldset p.error label {color: red;} * /
div.container {
background-color: # eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container {display: none}
/ *
. Container label.error {
display: inline;
}
* /
/ *
form.cmxform {width: 30em;}
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
* /
--></ Mce: style> <style type="text/css" mce_bogus="1"> / *
. Cmxform fieldset p.error label {color: red;} * /
div.container {
background-color: # eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container {display: none}
/ *
. Container label.error {
display: inline;
}
* /
/ *
form.cmxform {width: 30em;}
form.cmxform label.error {
display: block;
margin-left: 1em;
width: auto;
}
* / </ Style>
<mce:script type="text/javascript"> <! -
/ / Only for demo purposes
$. Validator.setDefaults ({
submitHandler: function () {
alert ("submitted! (skipping validation for cancel button)");
}
});
$ (). Ready (function () {

/*$("# Form1 "). Validate ({
errorLabelContainer: $ ("# form1 div.error")
});*/

var container = $ ('div.container');
/ / Validate the form when it is submitted
var validator = $ ("# form2"). validate ({
errorContainer: container,
errorLabelContainer: $ ("ol", container),
wrapper: 'li',
meta: "validate"
});

$ (". Cancel"). Click (function () {
validator.resetForm ();
});
});
/ / --></ Mce: script>
</ Head>
<body>
<h1> <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/"> jQuery Validation Plugin </ a> Demo </ h1>
<div>
<!--< Form method = "get" action = "">
<fieldset>
<legend> Login Form </ legend>
<p>
<label> Username </ label>
<input name="user" title="Please enter your username (at least 3 characters)" />
</ P>
<p>
<label> Password </ label>
<input type="password" maxlength="12" name="password" title="Please enter your password, between 5 and 12 characters" />
</ P>
<div>
</ Div>
<p>
<input type="submit" value="Login"/>
</ P>
</ Fieldset>
</ Form> ->
<! - Our error container ->
<div>
<h4> There are serious errors in your form submission, please see below for details. </ h4>
<ol>
<li> <label for="email"> Please enter your email address </ label> </ li>
<li> <label for="phone"> Please enter your phone <b> number </ b> (between 2 and 8 characters) </ label> </ li>
<li> <label for="address"> Please enter your address (at least 3 characters) </ label> </ li>
<li> <label for="avatar"> Please select an image (png, jpg, jpeg, gif) </ label> </ li>
<li> <label for="cv"> Please select a document (doc, docx, txt, pdf) </ label> </ li>
</ Ol>
</ Div>
<form method="get" action="">
<fieldset>
<legend> Validating a complete form </ legend>
<p>
<label for="email"> Email </ label>
<input name="email" />
</ P>
<p>
<label for="agree"> Favorite Color </ label>
<select name="color" title="Please select your favorite color!">
<option> </ option>
<option> Red </ option>
<option> Blue </ option>
<option> Yellow </ option>
</ Select>
</ P>
<p>
<label for="phone"> Phone </ label>
<input name="phone""some styles {validate:{required:true,number:true, rangelength:[2,8]}}" />
</ P>
<p>
<label for="address"> Address </ label>
<input name="address" />
</ P>
<p>
<label for="avatar"> Avatar </ label>
<input type="file" name="avatar" />
</ P>
<p>
<label for="agree"> Please agree to our policy </ label>
<input type="checkbox" title="Please agree to our policy!" name="agree" />
</ P>
<p>
<label for="cv"> CV </ label>
<input type="file" name="cv""{validate:{required:true,accept:'docx?|txt|pdf'}}" />
</ P>
<p>
<input type="submit" value="Submit"/>
<input type="submit" value="Cancel"/>
</ P>
</ Fieldset>
</ Form>
<div>
<h4> There are serious errors in your form submission, please see details above the form! </ h4>
</ Div>
<a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" mce_href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/"> Back to Home query-plugin-validation: </ a>
| <A href = "http://jquery.bassistance.de/validate/jquery.validate.zip" mce_href = "http://jquery.bassistance.de/validate/jquery.validate.zip" title = "zip- Archive with source code, minified and packed version, demos and examples "> download </ a>
| <a Href="http://jquery.bassistance.de/validate/changelog.txt" mce_href="http://jquery.bassistance.de/validate/changelog.txt"> Changelog </ a>
| <a Href="http://jquery.bassistance.de/validate/demo/" mce_href="http://jquery.bassistance.de/validate/demo/"> Demos </ a>
| <a Href="http://docs.jquery.com/Plugins/Validation" mce_href="http://docs.jquery.com/Plugins/Validation"> Documentation </ a>
</ Div>
<mce:script src="http://www.google-analytics.com/urchin.js" mce_src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </ mce: script>
<mce:script type="text/javascript"> <! -
_uacct = "UA-2623402-1";
urchinTracker ();
/ / --></ Mce: script>
</ Body>
</ Html>

<Type = "text / javascript">

JQuery Notes (form validation) five errorcontainer-demo_3.html meta: string collection
<Type = "text / javascript">

jquery.validate.js (Continued 1) {meta: string} Demo

Code errorcontainer-demo_3.html

view plaincopy to clipboardprint?
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
"Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"> </ mce: script>
<mce:script type="text/javascript"> <! -
$ (Document). Ready (function () {
$ ("# Myform"). Validate
({
meta: "validate", / / Tell the validation plugin to look inside a validate-property in metadata for validation rules.
submitHandler: function () {
alert ("Submitted!")
}
})
});
/ / --></ Mce: script>
</ Head>
<body>
<h1> jquery.validate.js (Continued 1) {meta: string} Demo </ h1>
<Mce: script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"> </ mce: script>
<Mce: script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"> </ mce: script>
<form>
<Input type = "text" name = "email"
/>
<br />
<input type="submit" value="Submit" />
</ Form>
</ Body>
</ Html>
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
"Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"> </ mce: script>
<mce:script type="text/javascript"> <! -
$ (Document). Ready (function () {
$ ("# Myform"). Validate
({
meta: "validate", / / Tell the validation plugin to look inside a validate-property in metadata for validation rules.
submitHandler: function () {
alert ("Submitted!")
}
})
});
/ / --></ Mce: script>
</ Head>
<body>
<h1> jquery.validate.js (Continued 1) {meta: string} Demo </ h1>
<Mce: script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"> </ mce: script>
<Mce: script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"> </ mce: script>
<form>
<Input type = "text" name = "email"
class = "{validate: {required: true, email: true}}" />
<br />
<input type="submit" value="Submit" />
</ Form>
</ Body>
</ Html>

JQuery Notes (form validation) collection of six errorcontainer-demo_4.html errorClass
<Type = "text / javascript">

jquery.validate.js (Continued 1) {errorClass: string} Demo

Code errorcontainer-demo_4.html

view plaincopy to clipboardprint?
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
"Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:style type="text/css"> <! -
. Myerror {font-weight: bold; color: # b31b1b; font-family: arial, verdana, sans-seriff;}

--></ Mce: style> <style type="text/css" mce_bogus="1">. Myerror {font-weight: bold; color: # b31b1b; font-family: arial, verdana, sans-seriff; }
</ Style>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"> </ mce: script>

<mce:script type="text/javascript"> <! -
$ (Document). Ready (function () {
$ ("# Myform"). Validate
({
errorClass: "myerror", / / errorClass Type: String Default: "error" Description: Use this setting to define the style of the style of error messages.
submitHandler: function () {
alert ("Submitted!")
}
})
});
/ / --></ Mce: script>
</ Head>
<body>
<h1> jquery.validate.js (Continued 1) {errorClass: string} Demo </ h1>
<Mce: script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"> </ mce: script>
<Mce: script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"> </ mce: script>
<form>
<Input type = "text" name = "email"
/>
<br />
<input type="submit" value="Submit" />
</ Form>
</ Body>
</ Html>

JQuery Notes (form validation) collection of seven errorcontainer-demo_5.html errorElement
<Type = "text / javascript">

jquery.validate.js (Continued 1) {errorElement: String} Demo

Code errorcontainer-demo_5.html

view plaincopy to clipboardprint?
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN"
"Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<mce:style type="text/css"> <! -
. Myerror {font-weight: bold; color: # b31b1b; font-family: arial, verdana, sans-seriff;}

--></ Mce: style> <style type="text/css" mce_bogus="1">. Myerror {font-weight: bold; color: # b31b1b; font-family: arial, verdana, sans-seriff; }
</ Style>
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"> </ mce: script>

<mce:script type="text/javascript"> <! -
$ (Document). Ready (function () {
$ ("# Myform"). Validate
({
/ *
errorElement Type: String Default: "label"
Note: The html element type to create an error message container.
The default "label" has a merit that can form in the error message with an invalid property between a meaningful use for the link (an often used, regardless of what form elements.)
* /
errorElement: "em", submitHandler: function () {
alert ("Submitted!")
}
})
});
/ / --></ Mce: script>
</ Head>
<body>
<h1> jquery.validate.js (Continued 1) {errorElement: String} Demo </ h1>
<Mce: script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.metadata.js"> </ mce: script>
<Mce: script type = "text / javascript"
src = "http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"> </ mce: script>
<form>
<Input type = "text" name = "email"
/>
<br />
<input type="submit" value="Submit" />
</ Form>
</ Body>
</ Html>

JQuery Notes (form validation) collection of eight metadata-demo.html jquery.metadata.js
<Type = "text / javascript">

...
Item 1
Item 2
{Item_id: 1, item_label: 'Label'} Item 3
<Type = "metadata"> Item 4
Code metadata-demo.html

view plaincopy to clipboardprint?
<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </ title>
<! -
<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"> </ mce: script>
<mce:script type="text/javascript" src="../jquery.metadata.js" mce_src="jquery.metadata.js"> </ mce: script>
->
<mce:script src="http://code.jquery.com/jquery-latest.js" mce_src="http://code.jquery.com/jquery-latest.js"> </ mce: script>
<mce:script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"> </ mce: script>
<mce:script language="javascript"> <! -

$ (Function () {
alert ($ ("# liangO"). metadata (). some); / / data
/ *
alert ($ ("# item1"). metadata (). item_id); / / 1

alert ($ ("# item1"). metadata ({type: "class"})
. Item_id); / / 1
* /
alert ($ ("# item2"). metadata ({"type": "attr"})
. Item_label
); / / "Label"
alert ($ ("# item2"). metadata ({"type": "attr",
"Name": "metadata"})
. Item_label); / / "Label"

/ *
alert ($ ("# item3"). metadata ({"type": "elem"})
. Item_label); / / FF under "Label", IE undefined under

alert ($ ("# item3"). metadata ({"type": "elem",
"Name": "metadata"})
. Item_label); / / FF under "Label", IE undefined under

alert ($ ("# item4"). metadata ({"type": "elem",
"Name": "script"})
. Item_label); / / "Label"
* /
});

/ / --></ Mce: script>
</ Head>

<body>
<ol>
<li> ...</ li>
<li> Item 1 </ li>
<li metadata='{"item_id": 1, "item_label": "Label"}'> Item 2 </ li>
<li>
<metadata mce_style="display: none;"> {item_id: 1, item_label: 'Label'} </ metadata>
Item 3 </ li>
<li>
<mce:script type="metadata"> <! -
{"Item_id": 1, "item_label": "Label"}
/ / --></ Mce: script>
Item 4 </ li>
</ Ol>
</ Body>
</ Html>

分类:Web 时间:2010-12-07 人气:195
分享到:
blog comments powered by Disqus

相关文章

  • jquery form validation, jquery.validate all captures 2010-06-11

    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

  • form validation jQuery plug-in of the plug-validationEngine 2010-09-26

    Function: Tooltip effect of web form validation, results as shown below: Examples of common verification: http://www.position-relative.net/creation/formValidator/ ajax validation example: http://www.position-relative.net/creation/formValidator/demoSu

  • Comes with a rich form validation jQuery plug-ins example 2010-06-29

    View results Download This is a jQuery form validation plugin, but it comes with a good variety of different forms authentication example, mainly a username login, user registration, Email confirmation, custom message prompts, single ringworm check b

  • javascript data validation js legal validation. js email verification. js url validation. js length of the authentication. js digital certification, etc. (pop-up dialog box form) 2009-01-06

    javascript data validation js legal validation, js email validation, js url validation, js length of the validation, js digital certification, etc. (pop-up dialog box form) 2008-11-07 02:51 / ** * To be in English and Chinese characters long * @ Para

  • jQuery动态添加 input type=file的实现代码 2014-04-21

    有时候需要在页面上允许用户上传多个文件,个数由用户自己决定,个数多了也可以删除,使用jQuery可以很简单的实现这个功能 <form id="fileForm" action="" method="post" enctype="multipart/form-data"> <tr> <td> <input type="file" name="file&quo

  • jQuery操作input type=radio的实现代码 2014-08-09

    jQuery操作input type=radio的实现代码,需要的朋友可以参考下 <input type="radio">如下: <input type="radio" name="city" value="BeiJing">北京 <input type="radio" name="city" value="TianJin">天津

  • 5 ways to use jQuery override form validation examples 2011-04-25

    Before the " Eko-free asynchronous interaction of Ajax to refresh the understanding of "this article, using the Ajax framework of traditional methods and AjaxGold 2 methods to achieve the" automatically check the form "example of using

  • input type description 2010-11-19

    Form Input in the form that an input object, its type and with different sub-Type text input box, the password input box, radio / check box, and submit / reset buttons, the following introduced one by one. 1, type = text Input type is text, this is t

  • input type=submit 的小问题 2013-07-16

    以前使用strtus2时,在jsp页面中有input时要去name才可以保证数据不会被提交到服务器,一直没有弄明白为什么会这样的,看到一段解释明白了. HTML元素 - input type=submit 定义 创建一个按钮,点击该按钮后,即提交表单. Creates a button that, when clicked, submits the form. 注释 使用 VALUE 标签属性将创建无法由用户编辑的显示标签.默认的文字是 Submit Query.如果用户单击提交按钮提交了表单,

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.259 (s). 12 q(s)