twitter-bootstrap 使用日期选择器进行 jquery 验证，突出显示问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17231302/
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 validation with datepicker, problems with highlight
提问by dzordz
I have two fields on my form. one is plain input for name and the other is powered with 'vitalets bootstrap datepicker'. I decided to use jquery validation plug in on it so when the first one 'name' is left blank it gets red, and for second 'date_birth' if in it stays default value it also turns red. So you gotta insert a name and you gotta pick some date than default one.
我的表单上有两个字段。一个是名称的普通输入，另一个由“vitalets bootstrap datepicker”提供支持。我决定在它上面使用 jquery 验证插件，所以当第一个 'name' 留空时它会变红，而对于第二个 'date_birth'，如果它保持默认值，它也会变红。所以你必须插入一个名字，你必须选择一些日期而不是默认日期。
I've added a errorPlacement and success rules which are doing as I described. But problem is on my 'date_birth' field. it gets red when you do not choose some other date but, second time, after submit if you choose some other date which is correct. It does not turns green as the above 'name' field....
我添加了一个 errorPlacement 和成功规则，它们按照我的描述进行。但问题出在我的“date_birth”字段上。如果您不选择其他日期，但第二次提交后，如果您选择其他正确日期，它会变红。它不会像上面的“名称”字段一样变成绿色....
Here is situation in jsfiddle: http://jsfiddle.net/dzorz/5xgfm/
这是 jsfiddle 的情况：http: //jsfiddle.net/dzorz/5xgfm/
html:
html：
<form class="form-horizontal" id="gold_form" method='post' action='/start_ajax/addgold/'>
<fieldset>
<span class="label-f">Name</span>
<input type="text" class="span4" id="name" name="name">
</br>
<span class="label-f">Date of birth</span>
<div class="input-append date notification" id="date_birth_picker" data-date="1980-01-01" data-date-format="yyyy-mm-dd">
<input class="span2" size="16" type="text" value="1980-01-01" readonly="" id="date_birth" name="date_birth">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</br>
<button type="submit" id="submit_btn" class="btn btn-primary btn-large">Submit</button>
</fieldset>
</form>
script:
脚本：
//datepicker
$(function(){
window.prettyPrint && prettyPrint();
$('#date_birth_picker').datepicker({
autoclose: true,
weekStart: 1,
});
});
//validation
$().ready(function() {
jQuery.validator.addMethod("defaultInvalid", function(value, element){
switch (element.value){
case $(element).prop("defaultValue"):
if (element.name == "date_birth") return false;
break;
default: return true;
break;
}
});
$("#gold_form").validate(
{
rules:{date_birth: "required defaultInvalid",
name: "required",
family_name: "required"
},
errorPlacement: function(error, element) {
$(element).filter(':not(.valid)').addClass("invalid");
},
success: function(error) {
$("#gold_form").find('.valid').removeClass("invalid").addClass("success");
},
});
});
css:
css：
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.error {
float: none; color: red !important; padding-left: .5em;
vertical-align: top;
}
.invalid {
border: 1px solid red !important;
}
.success{
border: 1px solid green !important;
}
Am I missing something or what? You can freely edit my jsfiddle.
我错过了什么或什么？您可以自由编辑我的 jsfiddle。
Thanks for help
感谢帮助
回答by Ryley
You'll need to re-check the validity of the date whenever the datepicker changes it, by hand.
每当日期选择器更改日期时，您都需要手动重新检查日期的有效性。
So after your datepicker is created, add a changeDateevent that runs the validmethod:
因此，在创建日期选择器后，添加一个changeDate运行该valid方法的事件：
$('#date_birth_picker').datepicker({
autoclose: true,
weekStart: 1,
}).on('changeDate', function(ev) {
if($('#date_birth').valid()){
$('#date_birth').removeClass('invalid').addClass('success');
}
});
回答by Aaron Marton
Somehow, after selecting a date, datepicker() loses focus of the date field and none of the validator plugins can see the date input field as filled (valid). As a conclusion, a simple .focus() does the trick.
不知何故，在选择日期后，datepicker() 失去了日期字段的焦点，并且没有任何验证器插件可以看到日期输入字段已填充（有效）。总之，一个简单的 .focus() 可以解决问题。
$('#datefield').datepicker({
//datepicker methods and settings here
}).on('changeDate', function (e) {
$(this).focus();
});
I have also posted this answer to this post Bootstrap datepicker and bootstrap validator
我也在这篇文章中发布了这个答案Bootstrap datepicker and bootstrap validator
