gpt4 book ai didi

javascript - JQuery 验证不显示错误

转载 作者:行者123 更新时间:2023-12-03 09:29:28 25 4
gpt4 key购买 nike

由于某种原因,即使我以前使用过类似的代码,JQuery 验证也会出现问题。我有一个简单的表格。

<form id="emailform" class="form-horizontal emailType" role="form">
<div class="form-group">
<label for="inputTitle" class="col-lg-4 control-label">Title</label>
<div class="col-lg-8">
<select class="form-control" id="inputTitle" name="inputTitle">
<option value="">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputName" class="col-lg-4 control-label">First Name(s)</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="inputName" name="inputName" placeholder="First Name(s)">
</div>
</div>
<div class="form-group">
<label for="inputSurname" class="col-lg-4 control-label">Surname</label>
<div class="col-lg-8">
<input type="text" class="form-control" id="inputSurname" name="inputSurname" placeholder="Surname">
</div>
</div>
<div class="form-group">
<label for="inputMethod" class="col-lg-4 control-label">Delivery Method</label>
<div class="col-lg-8" id="radioAlign">
<input type="radio" value="email" id="inputMethod" checked><span id="emailText">Email</span>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 control-label">Email</label>
<div class="col-lg-8">
<input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<label for="inputLinks" class="col-lg-4 control-label">Link to be sent</label>
<div class="col-lg-8">
<select class="form-control" id="inputLinks" name="inputLinks">
<option value="img/default.jpg">Please select...</option>
<option value="img/placeholder.jpg">Email1</option>
<option value="img/placeholder2.jpg">Email2</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">
Send Message
</button>
</div>
</div>
</form>
<div id="error"></div>

然后我就得到了验证。

$.validator.addMethod(
"notEqualTo",
function(elementValue,element,param) {
return elementValue != param;
},
"Value cannot be {0}"
);

$.validator.addMethod("myCustomRule", function(value, element) {
return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
}, "Please enter a valid email");

var validator = $("#emailform").validate({
errorPlacement: function (error, element) {
$(element)
.closest("form")
.find("#error")
.append(error);
},
rules: {
inputTitle: {
required: true,
notEqualTo: "Please select..."
},
inputName: {
required: true,
minlength: 1
},
inputSurname: {
required: true,
minlength: 1
},
inputEmail: {
required: true,
myCustomRule: true,
minlength: 5,
email: true
},
inputLinks: {
required: true,
notEqualTo: "Please select..."
}
},
messages: {
inputName: {
minlength: jQuery.validator.format("Please enter a valid name")
},
inputSurname: {
minlength: jQuery.validator.format("Please enter a valid surname")
},
inputEmail: {
minlength: jQuery.validator.format("Your email address is to short")
}
},
submitHandler: function(){
//Do success stuff here
return true;
},
invalidHandler: function(event,validator) {
//do error stuff here
return false;
}
});

如果我提交表单,则不会显示我的错误消息。相反,输入会以蓝色边框突出显示。

有什么原因导致我的错误不显示吗?

谢谢

最佳答案

我已更新您的验证按摩代码;

请检查一下,

$.validator.addMethod(
"notEqualTo",
function(elementValue,element,param) {
return elementValue != param;
},
"Value cannot be {0}"
);

$.validator.addMethod("myCustomRule", function(value, element) {
return /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{1,}))$/.test(value);
}, "Please enter a valid email");

var validator = $("#emailform").validate({
errorPlacement: function (error, element) {
$(element)
.closest("form")
.find("#error")
.append(error);
},
rules: {
inputTitle: {
required: true,
notEqualTo: "Please select..."
},
inputName: {
required: true,
minlength: 1
},
inputSurname: {
required: true,
minlength: 1
},
inputEmail: {
required: true,
myCustomRule: true,
minlength: 5,
email: true
},
inputLinks: {
required: true,
notEqualTo: "Please select..."
}
},
messages: {
inputName: {
minlength: jQuery.validator.format("Please enter a valid name")
},
inputSurname: {
minlength: jQuery.validator.format("Please enter a valid surname")
},
inputEmail: {
minlength: jQuery.validator.format("Your email address is to short")
}
},
errorPlacement: function (label, element) { // render error placement for each input type
$('<span class="error"></span>').insertAfter(element).append(label)
var parent = $(element).parent('.input-with-icon');
parent.removeClass('success-control').addClass('error-control');
},

highlight: function (element) { // hightlight error inputs
var parent = $(element).parent();
parent.removeClass('success-control').addClass('error-control');

},

unhighlight: function (element) { // revert the change done by hightlight
var parent = $(element).parent();
parent.removeClass('error-control').addClass('success-control');
},
submitHandler: function(){
//Do success stuff here
return true;
},
invalidHandler: function(event,validator) {
//do error stuff here
return false;
}
});

到底有没有用?让我知道

关于javascript - JQuery 验证不显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31563332/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com