验证文本输入 - 实现中的错误

Question

我遇到了验证的用户界面问题，我真的很想解决。对于网站：http://fun-booths.co.uk/dev/

我使用这个简单的插件进行验证：http://www.formvalidator.net/

这背后的简单代码如下：

 $.validate({
      form : '#fscf_form1, #fscf_form2',
      validateOnBlur : true, 
      scrollToTopOnError : false 
    });

validateOnBlur属性确保在输入松散焦点时进行验证。

右侧边栏中有一个表格。选择日期和时间时，验证无法正常运行。

例如，使用正确的测试数据格式填写城镇/城市和邮政编码字段。你会注意到动态出现绿色勾号。现在，对于最终用户实际不输入的日期和时间字段，通过分别单击响应时间选择器/日期选择器，可以将输入提供给表单字段。

选择日期和时间并关注其他输入元素后，会导致以下问题（即使选择了一个值，表格字段中会显示红叉，这是不希望的行为。）：

我认为这个问题源于用户实际上没有在时间或日期字段中输入文本的事实。因此，验证不会检测到实际文本已输入表单。

注意：奇怪的行为是，如果选择了某个值，则会在日期/时间字段上显示绿色勾号，然后再次选择/给予相同的输入。

是否有一个JavaScript / jQuery解决方案可以通过事件监听器触发来解决此问题并确保出现绿色勾号？或者是否需要在文本输入中输入日期/时间字段。

Answer 1

尝试这个黑客，应该工作：

$('.picker__input').on('change', function(){
    $(this).focus();
})

希望这有帮助。

Answer 2

你正在做两个插件一起工作。尝试给pickadate回调，要求重新处理该字段：

$('#fscf_field2_12').pickadate({
   //... add this parameter
   onClose: function() {
      $('#fscf_field2_12').blur();
   },
   //... or this one
   onSet: function() {
      $('#fscf_field2_12').blur()
   }  
})

您还可以从jQuery-Form-Validator中查看validateOnEvent方法。