Jquery 验证自定义错误消息位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26498899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Validate custom error message location
提问by learntosucceed
This looks very simply, but I can't figure it out. I'm using the jquery validate plugin. I'm trying to validate <input name=first>and <input name=second>to output the error messages into:
这看起来很简单，但我无法弄清楚。我正在使用 jquery 验证插件。我正在尝试验证<input name=first>并将<input name=second>错误消息输出到：
<span id="errNm2"></span> <span id="errNm1"></span>
I already started writing the errorPlacement: which is where you customize your error message location.
我已经开始编写 errorPlacement: 自定义错误消息位置的地方。
How can I put the errors message in those <span>?
我怎样才能把错误消息放在那些中<span>？
$(document).ready(function () {
$('#form').validate({
errorPlacement: function(error, element) {
error.append($('.errorTxt span'));
},
rules,
});
<input type="text" name="first"/>
<input type="text" name="second"/>
<div class="errorTxt">
<span id="errNm2"></span>
<span id="errNm1"></span>
</div>
回答by Arun P Johny
What you should use is the errorLabelContainer
你应该使用的是errorLabelContainer
jQuery(function($) {
var validator = $('#form').validate({
rules: {
first: {
required: true
},
second: {
required: true
}
},
messages: {},
errorElement : 'div',
errorLabelContainer: '.errorTxt'
});
});.errorTxt{
border: 1px solid red;
min-height: 20px;
}<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="form" method="post" action="">
<input type="text" name="first" />
<input type="text" name="second" />
<div class="errorTxt"></div>
<input type="submit" class="button" value="Submit" />
</form>If you want to retain your structure then
如果你想保留你的结构，那么
jQuery(function($) {
var validator = $('#form').validate({
rules: {
first: {
required: true
},
second: {
required: true
}
},
messages: {},
errorPlacement: function(error, element) {
var placement = $(element).data('error');
if (placement) {
$(placement).append(error)
} else {
error.insertAfter(element);
}
}
});
});#errNm1 {
border: 1px solid red;
}
#errNm2 {
border: 1px solid green;
}<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<form id="form" method="post" action="">
<input type="text" name="first" data-error="#errNm1" />
<input type="text" name="second" data-error="#errNm2" />
<div class="errorTxt">
<span id="errNm2"></span>
<span id="errNm1"></span>
</div>
<input type="submit" class="button" value="Submit" />
</form>回答by Pete
You can simply create extra conditions which match the fields you require in the same function. For example, using your code above...
您可以简单地创建与您在同一函数中需要的字段相匹配的额外条件。例如，使用上面的代码...
$(document).ready(function () {
$('#form').validate({
errorPlacement: function(error, element) {
//Custom position: first name
if (element.attr("name") == "first" ) {
$("#errNm1").text(error);
}
//Custom position: second name
else if (element.attr("name") == "second" ) {
$("#errNm2").text(error);
}
// Default position: if no match is met (other fields)
else {
error.append($('.errorTxt span'));
}
},
rules
});
Hope that helps!
希望有帮助！
回答by Pankaj Mandale
if (e.attr("name") == "firstName" ) {
$("#firstName__validate").text($(error).text());
console.log($(error).html());
}
Try this get text of error object
试试这个获取错误对象的文本
回答by Developer
JQUERY FORM VALIDATION CUSTOM ERROR MESSAGE
JQUERY 表单验证自定义错误消息
$(document).ready(function(){
$("#registration").validate({
// Specify validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
phone: {
required: true,
digits: true,
minlength: 10,
maxlength: 10,
},
password: {
required: true,
minlength: 5,
}
},
messages: {
firstname: {
required: "Please enter first name",
},
lastname: {
required: "Please enter last name",
},
phone: {
required: "Please enter phone number",
digits: "Please enter valid phone number",
minlength: "Phone number field accept only 10 digits",
maxlength: "Phone number field accept only 10 digits",
},
email: {
required: "Please enter email address",
email: "Please enter a valid email address.",
},
},
});
});<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator()</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<style>
.error{
color: red;
}
label,
input,
button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
.common_box_body {
padding: 15px;
border: 12px solid #28BAA2;
border-color: #28BAA2;
border-radius: 15px;
margin-top: 10px;
background: #d4edda;
}
</style>
</head>
<body>
<div class="common_box_body test">
<h2>Registration</h2>
<form action="#" name="registration" id="registration">
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John"><br>
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe"><br>
<label for="phone">Phone</label>
<input type="text" name="phone" id="phone" placeholder="8889988899"><br>
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="[email protected]"><br>
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder=""><br>
<input name="submit" type="submit" id="submit" class="submit" value="Submit">
</form>
</div>
</body>
</html>回答by Adel Mourad
HTML
HTML
<form ... id ="GoogleMapsApiKeyForm">
...
<input name="GoogleMapsAPIKey" type="text" class="form-control" placeholder="Enter Google maps API key" />
....
<span class="text-danger" id="GoogleMapsAPIKey-errorMsg"></span>'
...
<button type="submit" class="btn btn-primary">Save</button>
</form>
Javascript
Javascript
$(function () {
$("#GoogleMapsApiKeyForm").validate({
rules: {
GoogleMapsAPIKey: {
required: true
}
},
messages: {
GoogleMapsAPIKey: 'Google maps api key is required',
},
errorPlacement: function (error, element) {
if (element.attr("name") == "GoogleMapsAPIKey")
$("#GoogleMapsAPIKey-errorMsg").html(error);
},
submitHandler: function (form) {
// form.submit(); //if you need Ajax submit follow for rest of code below
}
});
//If you want to use ajax
$("#GoogleMapsApiKeyForm").submit(function (e) {
e.preventDefault();
if (!$("#GoogleMapsApiKeyForm").valid())
return;
//Put your ajax call here
});
});
回答by Amar pratap singh
This Worked for me
这对我有用
Actually error is a array which contain error message and other values for elements we pass, you can console.log(error); and see. Inside if condition "error.appendTo($(element).parents('div').find($('.errorEmail')));" Is nothing but finding html element in code and passing the error message.
实际上 error 是一个数组，其中包含我们传递的元素的错误消息和其他值，您可以使用 console.log(error); 看看。内部 if 条件 "error.appendTo($(element).parents('div').find($('.errorEmail')));" 只不过是在代码中查找 html 元素并传递错误消息。
$("form[name='contactUs']").validate({
rules: {
message: 'required',
name: "required",
phone_number: {
required: true,
minlength: 10,
maxlength: 10,
number: false
},
email: {
required: true,
email: true
}
},
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message",
phone_number: "Please enter a valid mobile number"
},
errorPlacement: function(error, element) {
$("#errorText").empty();
if(error[0].htmlFor == 'name')
{
error.appendTo($(element).parents('div').find($('.errorName')));
}
if(error[0].htmlFor == 'email')
{
error.appendTo($(element).parents('div').find($('.errorEmail')));
}
if(error[0].htmlFor == 'phone_number')
{
error.appendTo($(element).parents('div').find($('.errorMobile')));
}
if(error[0].htmlFor == 'message')
{
error.appendTo($(element).parents('div').find($('.errorMessage')));
}
}
});
回答by Giorgio C.
Add this code in your validate method:
在您的验证方法中添加此代码：
errorLabelContainer: '#errors'
and in your html, put simply this where you want to catch the error:
并在您的 html 中，简单地将其放在要捕获错误的位置：
<div id="errors"></div>
All the errors will be held in the div, independently of your input box.
所有错误都将保存在 div 中，与您的输入框无关。
It worked very fine for me.
它对我来说非常好。
