我以前有过这个工作...我不知道发生了什么变化来破坏我的验证器插件。 当我单击“提交”按钮时，我会收到一条警报，指出当我将许多字段留空时，该表单有效。我在控制台中没有收到任何 JS 错误。
注册表:
<div class="error_container">
<p>Please correct the following errors and try again:</p>
<ul />
</div>
<div class="registration">
<form class="pure-form pure-form-aligned" id="purchase_premium" action="javascript:" method="POST">
<legend>
<h1>Purchase Premium Access</h1>
</legend>
<fieldset>
<div class="pure-control-group">
<label for="first_name">First Name:</label>
<input id="first_name" type="text" value="Timothy" placeholder="First Name">
</div>
<div class="pure-control-group">
<label for="last_name">Last Name:</label>
<input id="last_name" type="text" value="Hemendinger" placeholder="Last Name">
</div>
<div class="pure-control-group">
<label for="email">Email Address:</label>
<input id="email" type="email" value="timh@theihcc.com" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="password">Password:</label>
<input id="password" type="password" value="185869" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="password_confirm">Confirm Password:</label>
<input id="password_confirm" type="password" value="185869" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="address">Address:</label>
<input id="address" type="text" placeholder="Address" value="15 St.">
</div>
<div class="pure-control-group">
<label for="city">City:</label>
<input id="city" type="text" placeholder="City" value="Atlanta">
</div>
<div class="pure-control-group">
<label for="state">State/Province:</label>
<select id="state">
<option value="">- Select Province/State -</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA" selected>Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="pure-control-group">
<label for="cc_number">Credit Card Number:</label>
<input id="cc_number" type="text" value="4242424242424242">
</div>
<div class="pure-control-group">
<label for="cc_expiration_month">Expiration Date:</label>
<select id="cc_expiration_month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6" selected>June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="cc_expiration_year">
<option value="2014">2014</option>
<option value="2015" selected>2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</div>
<div class="pure-control-group">
<label for="cc_cvc">CVV/CVC Security Code:</label>
<input id="cc_cvc" type="text" value='697'>
</div>
<div class="pure-control-group">
<label for="account_type">Account Type:</label>
<select id="account_type">
<option value="">--- Choose One ----</option>
<option value="30-day">30-Day Access</option>
<option value="1-year">One-Year Subscription</option>
</select>
</div>
<div style="margin-left: 55px; padding-top: 25px; margin-bottom: 15px;">
<input type="checkbox" id="terms" style="margin-right: 20px;"><label for="terms">I agree to the</label> <a href="#" id="terms_link">Terms & Conditions</a>
</div>
<button id="purchase_submit" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
验证器代码:
<script src="js/validate.js"></script>
<script>
$(function() {
$('#purchase_submit').on('click', function(e){
$("#purchase_premium").validate({
onkeyup: false,
onfocusout: false,
onclick: false,
rules: {
account_type: "required",
first_name: "required",
last_name: "required",
address: "required",
city: "required",
email: "required",
state: "required",
cc_number: {
required: true,
creditcard: true
},
cc_cvc: "required",
password: {
required: true,
minlength : 6
},
password_confirm: {
equalTo: "#password"
}
},
messages: {
account_type: "Please select an account type.",
first_name: "Please enter your first name",
last_name: "Please enter your last name",
address: "Please enter your address",
city: "Please enter your city",
email: "Please enter a valid email address",
state: "Please select a state/province",
cc_number: "Please enter a valid credit card number",
cc_cvc: "Please enter a valid CVV/CVC Security Code",
password: {
required: "Please enter a password.",
minlength: "Your password must be at least 6 characters in length",
}
},
errorContainer: $('.error_container'),
errorLabelContainer: $('.error_container ul'),
wrapper: 'li'
});
jQuery.extend(jQuery.validator.messages, {
equalTo: "Your two passwords do not match"
});
if ($("#purchase_premium").valid()) {
alert('valid');
e.preventDefault();
//$("#purchase_premium").submit();
} else {
e.preventDefault();
}
});
});
</script>
最佳答案
- 你输入
.validate()功能到.onclick功能。这是不正确的。 - 您没有为每个
<input .. />指定名称属性
问题已经解决了。
使用这个:
$().ready(function () {
var container = $('.error_container');
$("#purchase_premium").validate({
onkeyup: false,
onfocusout: false,
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
rules: {
account_type: {
required: true
},
first_name: {
required: true
},
last_name: {
required: true
},
address: {
required: true
},
city: {
required: true
},
email: {
required: true
},
state: {
required: true
},
cc_number: {
required: true,
creditcard: true
},
cc_cvc: "required",
password: {
required: true,
minlength: 6
},
password_confirm: {
equalTo: "#password"
}
},
messages: {
account_type: "Please select an account type.",
first_name: "Please enter your first name",
last_name: "Please enter your last name",
address: "Please enter your address",
city: "Please enter your city",
email: "Please enter a valid email address",
state: "Please select a state/province",
cc_number: "Please enter a valid credit card number",
cc_cvc: "Please enter a valid CVV/CVC Security Code",
password: {
required: "Please enter a password.",
minlength: "Your password must be at least 6 characters in length",
}
},
submitHandler: function (form) {
alert('valid');
// you can access form by `form` tag, for example $(form).serialize()
}
});
jQuery.extend(jQuery.validator.messages, {
equalTo: "Your two passwords do not match"
});
// if ($("#purchase_premium").valid()) {
// alert('valid');
// e.preventDefault();
// //$("#purchase_premium").submit();
// } else {
// e.preventDefault();
// }
});
此外，如果您想在表单有效时执行某些操作，请使用 submitHandler处理程序:
$("#purchase_premium").validate({
// set some properties
// messages and
// rules
submitHandler: function(form) {
alert('valid');
// you can access form by `form` tag, for example $(form).serialize()
}
});
此外，您的 html 无效。您使用:
<input id="last_name" name='last_name' type="text" placeholder="Last Name">
但是你必须使用:
<input id="last_name" name='last_name' type="text" placeholder="Last Name" />
请注意此/符号位于末尾。
关于javascript - jQuery 验证插件无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23503842/