我正在使用 jQuery 验证插件。
如何将成功类添加到另一个元素？
如果我输入正确的电子邮件地址，我想为 - 分配一个类div.field- 这可以使用 jQuery Validation 插件吗？
HTML：
<form id="registration" method="get">
<fieldset>
<legend>Registration Details</legend>
<div class="field">
<label for="email">Email<em>*</em>
</label>
<input type="text" name="email" id="email" class="required email" />
</div>
<div class="field">
<label for="confirm_email">Confirm email<em>*</em>
</label>
<input type="text" name="confirm_email" id="confirm_email" class="required email" />
</div>
<div class="password">
<div class="field">
<label for="password">Password<em>*</em>
</label>
<input type="password" name="password" id="password" class="required password min-length_6" />
</div>
<div class="field">
<label for="confirm_password">Confirm<em>*</em>
</label>
<input type="password" name="confirm_password" id="confirm_password" class="confirmation-of_password" title="Please enter the exact same password" />
</div>
</div>
</fieldset>
JavaScript：
var formActions = {};
// Form initialisation
formActions.init = function () {
// Validate For Registration
$('#registration').validate({
rules: {
email: "required",
confirm_email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
email: {
required: "Please enter a valid email address."
},
confirm_email: {
required: "Please enter a valid email address.",
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
}
}
});
};
$(formActions.init);
CSS：
/* Form styles
------------------------------------------*/
form {
}
legend {
font-size:1.4em;
font-weight:bold;
padding:0 10px;
}
.field {
overflow: auto;
padding: 5px 10px 10px 10px;
}
.field.terms, .field.terms label {
width:auto;
}
.field.terms input {
width:16px;
float:left;
}
label, .checkbox p, .radio p {
padding: 0.2em 0 0;
display:block;
font-size:1.2em;
}
form label {
font-size:1.2em;
margin:0 0 5px 0;
}
form label em {
color:red;
font-style:normal;
}
input, select {
width: 250px;
clear:both;
}
form label.error {
margin:0px;
font-size:1.2em;
color:Red;
}
input.checkbox {
border: none
}
input:focus {
border: 1px solid #c7e2f1;
border-top:1px solid #5794bf;
width:250px;
padding:2px;
}
input.error {
border: 1px solid #ff8282;
border-top:1px solid red;
background:#ffdcdc;
width:250px;
padding:2px;
}
select {
width: 163px;
}
.error .messages, .error .messages li {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.error .messages li {
padding: 0.1em 0 0 1.5em;
color: #b92d23;
}
.error input {
color: #b92d23;
}
.success {
background: url(/design/images/success_icon.png) 350px 0.2em no-repeat;
}
.error {
background: url(/design/images/error_icon.png) 350px 0.2em no-repeat;
}
fieldset {
border: 1px solid #ccc;
margin-bottom:10px;
}
.checkbox p, .checkbox .inputs {
float: left;
}
.checkbox p {
padding: 0;
margin: 0 0 1em;
}
.checkbox .inputs {
width: 165px;
}
.checkbox .inputs, .checkbox .inputs li {
list-style: none;
margin: 0 0 1em;
padding: 0;
}
.checkbox .inputs li {
margin: 0 0 0.3em;
}
.checkbox li label, .checkbox li input {
display: inline;
float: none;
width: auto;
}
.validate_any {
position: relative;
}
.validate_any.error {
padding-top: 2em;
background-position: 0 0.2em;
}
#terms_block {
background-position: 205px 0.2em;
}
#terms_block .messages li {
padding-top: 0.2em;
}
.validate_any .messages {
position: absolute;
left: 0;
top: 0.1em;
}