JQuery Notes (form validation)
Advertisements
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
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>
Related Posts of JQuery Notes (form validation)
-
hibernate call stored procedure
hibernate call stored procedure
-
hibernate using c3p0 connection pooling
Private http://www.lifevv.com/tenyo/doc/20070605102040991.html c3p0 for open source's JDBC connection pool, with the release hibernate. This article describes how to use the hibernate configuration in c3p0. c3p0 connection pool configuration is v ...
-
hibernate parabolic mistake: null in entry
Ssh in a project, I encountered such a parabolic mistake: auth.model.AuthUser is a model category. And I tried to write the sql Success. Subsequently, I see, and should be a key requirement for non-empty result, I accidentally omitted. Seriously comp ...
-
Hibernate configuration parameters hibernate.hbm2ddl.auto
Hibernate in the configuration file: <properties> <property name="hibernate.hbm2ddl.auto" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...
-
Build flex + spring + blazeds + hibernate application
Build flex + spring + blazeds + hibernate application First, set up the project blazeds 1, will blazeds.war extract to a directory, such as: myflex /; 2, set up java works were such as: MyFlex, in the orientation of selection create project from exis ...
-
Hibernate connection pool configuration
Hibernate connection pool configuration <! - Jdbc -> <property name="connection.driver_class"> oracle.jdbc.driver.OracleDriver </ property> <property name="connection.url"> jdbc: oracle: thin: @ 10.203.14.132:15
-
hibernate generic generic DAO
package org.lzpeng.dao; import java.io.Serializable; import java.util.List; import org.hibernate.Criteria; import org.hibernate.Query; import org.hibernate.criterion.Criterion; import org.springside.modules.orm.hibernate.Page; /** * * @version 2009-1-10 *
-
Struts2 + hibernate + spring problem user log in
dao layer services layer action jsp <tr> <td align="center"> <b> user name: </ b> </ td> <td> <s: textfield name = "czyNumber" cssClass = "textstyle" theme = "simple" size = &q
-
Hibernate secondary cache
Hibernate cache: 2-bit cache, also known as process-level cache or SessionFactory level cache, secondary cache can be shared by all of the session Cache configuration and the use of: Will echcache.xml (the document code in hibernate package directory ...
-
Hibernate's lazy strategy
hibernate Lazy strategy can be used in: <class> tag, it can be true / false Tags can <PROPERTY> values true / false type of necessary tools to enhance <set> <list> can tag values true / false / extra <many-to-one> <on ...
blog comments powered by Disqus