我已经审查了一些与验证有关的答案,包括jQuery验证的要求
gro点但是,我无法做到这一点。我有以下字段:
- 帐户名
- Enterpassword
- AccountName1
- AccountName2
- interpassword1
- Enterpassword2
必须输入accountName1或enterpassword1。当我单击"更新"按钮(不输入这些字段中的任何一个)时,没有显示错误消息。
html:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.min.js"></script>
<form data-toggle="validator" role="form" id="contactForm">
<div class="row">
<div class="col-md-12">
<div class="form-signin">
<h2 class="form-signin-heading">Please update your account details:</h2>
<div class="input-group">
<span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i></span>
<input id="accountName" name="accountName" type="text" class="input-block-level" placeholder="Current Account">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="enterPassword" name="enterPassword" type="password" class="input-block-level" placeholder="Current password">
</div>
<div class="input-group">
<span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i></span>
<input id="accountName1" name="newEntry" type="text" class="input-block-level" placeholder="New account">
</div>
<div class="input-group">
<span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i></span>
<input id="accountName2" name="accountName2" type="text" class="input-block-level" placeholder="Confirm new account">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="enterPassword1" name="newEntry" type="password" class="input-block-level" placeholder="New password"
data-toggle="tooltip" title="Enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric.">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="enterPassword2" name="enterPassword2" type="password" class="input-block-level" placeholder="Confirm new password"
data-toggle="tooltip" title="Enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric.">
</div>
<button id="submit" class="btn btn-large btn-primary" >Update </button>
</div>
</div>
</div> <!-- /row -->
</form>
jQuery:
$(document).ready(function(){
$.validator.addMethod(
"regex",
function(value, element, regexp) {
if (regexp.constructor != RegExp)
regexp = new RegExp(regexp);
else if (regexp.global)
regexp.lastIndex = 0;
return this.optional(element) || regexp.test(value);
},
"Please enter correct Characters."
);
$('[data-toggle="tooltip"]').tooltip();
$("#contactForm").validate({
groups: { // consolidate messages into one
names: "accountName enterPassword accountName1 enterPassword1 accountName2 enterPassword2 newEntry"
},
rules: {
accountName: {
required: true,
minlength: 2
},
enterPassword: {
required: true,
minlength: 8
},
accountName1: {
require_from_group: [1, ".send"],
minlength: 2
},
accountName2: {
minlength: 2,
equalTo: "#accountName1"
},
enterPassword1: {
require_from_group: [1, ".send"],
regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{8,}/,
minlength: 8
},
enterPassword2: {
regex: /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[$@$!%*?&])[A-Za-zd$@$!%*?&]{8,}/,
minlength: 8,
equalTo: "#enterPassword1"
},
newEntry: {
require_from_group: [1, ".input-group"]
},
},
messages: {
accountName: {
required: "Please enter your current account name.",
minlength: "Your account name must consist of at least 2 characters."
},
enterPassword: {
required: "Please enter your current password.",
minlength: "Your password must consist of at least 8 characters."
},
accountName1: {
minlength: "Your account name must consist of at least 2 characters."
},
accountName2: {
minlength: "Your account name must consist of at least 2 characters.",
equalTo: "Your confirmation account name does not match the original."
},
enterPassword1: {
regex: "Please nter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric.",
minlength: "Your password must consist of at least 8 characters."
},
enterPassword2: {
regex: "Please enter at least 8 characters containing at least 1 lower case, 1 upercase, 1 special and 1 numeric.",
minlength: "Your password must consist of at least 8 characters.",
equalTo: "Your confirmation password does not match the original."
}
},
submitHandler : function(contactForm) {
//do something here
var frm = $('#contactForm');
//alert($("#accountName1").val());
$.ajax({
type: "POST",
url: "UpdateAccountView",
cache: false,
data: frm.serialize(),
success: function(data){
console.log('Submission was successful.');
console.log(data);
$("#accountName").focus();
$('#ajaxGetUserServletResponse').text(data);
}
});
}
});
}); // end document.ready
您已经定义了规则...
accountName1: {
require_from_group: [1, ".send"]
....
enterPassword1: {
require_from_group: [1, ".send"]
....
但是,您的字段都不包含class="send"
,请注意,accountName1
和enterPassword1
应该与该领域的 name
匹配, not not id
。>
您在几个地方的name
属性也有问题...
<input id="accountName1" name="newEntry" ...
<input id="enterPassword1" name="newEntry" ...
由于name
是插件跟踪输入的方式,因此您的name
必须匹配您在.validate()
的rules
对象中使用的参数,并且不应重复。
您还具有以下规则中定义的,但这是没有意义的...
newEntry: {
require_from_group: [1, ".input-group"]
},
最后,您包括additional-methods.js
的1.9版,我们看不到jQuery Validate的版本。请注意,版本1.9非常旧,自那时以来已修复了许多带有require_from_group
的错误。
否则,您的代码正在工作:https://jsfiddle.net/van2havr/
注意:我禁用groups
选项,以确保清晰。(我从字段列表中删除了newEntry
)
另一个注:
您不利用将函数的参数传递到submitHandler
中。您可以称其为form
或将其保留为contactForm
。
submitHandler : function(contactForm) {
// var frm = $('#contactForm'); // <-not needed
$.ajax({
....
data: $(contactForm).serialize(), // <- use it like this
....
});
}