jQuery 简单的jquery验证——自定义位置错误信息放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17306067/
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
Simple jquery validation - custom position error message placement
提问by CodeGeeek
I am using jquery validate plugin to validate number in a form, how can i place the returned error message under the input button , i am unable to achieve,
我正在使用jquery 验证插件来验证表单中的数字，如何将返回的错误消息放在输入按钮下，我无法实现，
Here is my image with the issue and what i need,pls check - http://i.imgur.com/Gt5aNxs.png
这是我的问题图像以及我需要什么，请检查 - http://i.imgur.com/Gt5aNxs.png
Please suggest me how to put the error message in a custom Div under the button instead of default underneath.
请建议我如何将错误消息放在按钮下方的自定义 Div 中，而不是下方的默认值。
Here is my code:
这是我的代码：
<section id="contact" class="content">
<div class="container">
<h2>Contact Form Demo</h2>
<div class="row">
<div class="span12 contact-form">
<form action="mail.php" method="POST" class="form-horizontal contact-form" id="contact-form">
<!--<?php $formKey->outputKey(); ?> -->
<fieldset>
<div class="control-group">
<label class="control-label" for="inputPhone">Phone</label>
<div class="controls">
<input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country & area code">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" value="Send" class="btn" id="btn-place">Send!</button>
</div>
<div >place here</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</section>
<!-- javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
// contact form validation
$(document).ready(function(){
$('#contact-form').validate(
{
rules: {
name: {
minlength: 3,
required: true
},
email: {
required: true,
email: true
},
phone: {
minlength: 11,
required: false,
number: true
},
subject: {
minlength: 3,
required: true
},
message: {
minlength: 20,
required: true
}
},
highlight: function(label) {
$(label).closest('.control-group').addClass('error');
},
success: function(label) {
label
.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
}
});
// contact form submission, clear fields, return message,script no shown here
</script>
回答by Ryley
All you need to do is specify the errorLabelContainerin your options and specify the div you want the errors to go into:
您需要做的就是在您的选项中指定errorLabelContainer并指定您希望错误进入的 div：
$('#contact-form').validate({
//all your other options here
errorLabelContainer: '#errors'
});
Then just make sure you specify that your place herediv has the id errorslike this:
然后确保您指定您的place herediv 具有这样的 id errors：
<div id="errors"></div>
See a working example here: http://jsfiddle.net/ryleyb/aaEFQ/(note that I also specified the wrapperoption, which you'll probably want if there are multiple errors).
在此处查看一个工作示例：http: //jsfiddle.net/ryleyb/aaEFQ/（请注意，我还指定了该wrapper选项，如果有多个错误，您可能需要该选项）。
回答by farhan Asad
errorPlacement: function(error, element) {
if((element.attr('name') === 'color[]')){
error.appendTo("div#errors");
}
else if(element.attr('name') === 'font[]' ){
error.appendTo("#font-error");
}
else{
element.before(error);
}
}
