jQuery 验证器和日期选择器单击未验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22335120/
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 validator and datepicker click not validating
提问by user1532468
I am using jquery validator to validate text inputs. The problem I have is, if I click submit it displays all error message correctly. However, on the datepicker input, to clear the error message I have to select the datepicker twice. ie; 1 click to select and it inputs the data correctly. 2nd click to clear the error message.
我正在使用 jquery 验证器来验证文本输入。我遇到的问题是，如果我单击提交，它会正确显示所有错误消息。但是，在 datepicker 输入上，要清除错误消息，我必须两次选择 datepicker。IE; 1点击选择，正确输入数据。第 2 次单击以清除错误消息。
I read somewhere about using an 'on' event on the datepicker, so I tried that, but it made no difference. I don't think that is coded correctly. I am assuming that the invalid and success classes are part of the validator script. Worth a try.
我在某处阅读了有关在日期选择器上使用“on”事件的信息，因此我尝试了该操作，但没有任何区别。我认为编码不正确。我假设 invalid 和 success 类是验证器脚本的一部分。值得一试。
What could be happening here. Thanks
这里会发生什么。谢谢
Sciprt code
脚本代码
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2011:2037',
dateFormat: 'dd/mm/yy',
minDate: 0,
defaultDate: null
}).on('changeDate', function(ev) {
if($('#datepicker').valid()){
$('#datepicker').removeClass('invalid').addClass('success');
}
});
});
</script>
html code
html代码
<label for"datepicker">
<input id="datepicker" name="datepicker" type="text" />
</label>
validator relevant code
验证器相关代码
Rules/Message section
规则/消息部分
datepicker:
{
required: true,
date: true
},
datepicker:
{
required: " * required: You must enter a destruction date",
date: "Can contain digits only"
}
回答by Sparky
Quote OP:
引用 OP：
"I have to select the datepicker twice. ie; 1 click to select and it inputs the data correctly. 2nd click to clear the error message."
“我必须选择日期选择器两次。即；1 单击以选择并正确输入数据。第二次单击以清除错误消息。”
That's because validation is normally triggered on keyupand blurevents. Since you're using a date-picker to interact with the field, rather than the keyboard, you're interfering with the normal triggering events.
那是因为验证通常是在keyup和blur事件上触发的。由于您使用日期选择器与字段而不是键盘进行交互，因此您会干扰正常的触发事件。
Your code is supposed to compensate, but is over-kill...
你的代码应该补偿，但过度杀伤......
$(function() {
$("#datepicker").datepicker({ ... })
.on('changeDate', function(ev) {
if($('#datepicker').valid()){
$('#datepicker').removeClass('invalid').addClass('success');
}
});
});
You only need to call the .valid()method on the field whenever the value changes.
.valid()只要值发生变化，您只需在字段上调用该方法。
$(function() {
$("#datepicker").datepicker({ ... })
.on('changeDate', function(ev) {
$(this).valid(); // triggers the validation test
// '$(this)' refers to '$("#datepicker")'
});
});
However, this is basically the same as you had before.
但是，这与您之前的情况基本相同。
What is changeDatesupposed to be? Is this something defined by your datepicker plugin? That's not a standard jQuery event, so likely the whole problem. Try the standard changeevent instead....
什么是changeDate应该是什么？这是由您的日期选择器插件定义的吗？这不是标准的 jQuery 事件，所以很可能是整个问题。change改为尝试标准事件....
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: '2011:2037',
dateFormat: 'dd/mm/yy',
minDate: 0,
defaultDate: null
}).on('change', function() {
$(this).valid(); // triggers the validation test
// '$(this)' refers to '$("#datepicker")'
});
});
回答by dnrayzn
Sparky's answer worked great for me, the only thing I would change is instead of using the id, I just used the jquery this in the on function, ie:
Sparky 的回答对我很有用，我唯一要改变的是而不是使用 id，我只是在 on 函数中使用了 jquery this，即：
.on('change', function() {
$(this).valid();
});
That just makes it a little more general.. -D
这只是让它更一般..-D
回答by Suraj Chougule
If you are using Jquery Form Validator(http://www.formvalidator.net/) and you want to use bootstarp datepicker then just add class="hasDatepicker" to input element.It worked for me.
如果您使用的是 Jquery 表单验证器（http://www.formvalidator.net/）并且您想使用 bootstarp datepicker，那么只需将 class="hasDatepicker" 添加到输入元素。它对我有用。
<input type="text" name='birth_date' class="form-control hasDatepicker" id="datepicker" value="" data-validation="birthdate" data-validation-format="mm/dd/yyyy">
