0

（关注来自Placeholder Hidden的问题）

我希望我的表单在加载时验证现有数据。我似乎无法做到这一点

  • 我 jQuery.each 我的控件并调用 focus() 和 blur()，还有比这更好的方法吗？我试图调用 ctrl.checkValidity()，但它并不总是被定义。当它是时，它仍然没有标记控件。
  • 我似乎也有时间问题，当 focus 和 blur() 触发时，UI 没有更新。就好像 Webshims 还没有完全加载，即使这在 $.webshims.ready 事件中触发。
  • 我也尝试调用 $('#form').submit()，但这并没有像我预期的那样触发事件。我能做到这一点的唯一方法是包含一个输入类型='提交'。我如何务实地设置表单验证，例如单击提交按钮？

这是一个演示问题的jsFiddle。当表单加载时，我希望将无效的电子邮件标记为这样。如果您单击添加按钮，那么它将被标记，但在最初加载时不会被标记。为什么？

  • 控件中的焦点和模糊将导致它被标记。

  • 但是，单击 ADD 也会（它运行的方法与加载时运行的方法相同）。为什么它第二次起作用，但在最初加载时却不起作用？

    updateValidation : function ()  {
this.$el.find('[placeholder]').each(function (index, ctrl) {  
    var $ctrl = $(ctrl);
    if( $ctrl.val() !== "" && (ctrl.checkValidity && !ctrl.checkValidity()) ) {
        // alert('Do validity check!');
        $ctrl.focus();
        $ctrl.blur();
    }
});
}

我在 FF 17.0.5 中看到了这一点。IE9 中的问题更严重，有时在字段显​​示错误之前单击 2 或 3 次 ADD。但是，由于 mime 类型不匹配，我喜欢的一些 js 文件出现错误。

4

1 回答 1

0

这与您尝试重用 .user-error 类有关，该类是 CSS4 :user-error 的“垫片”，不应从脚本触发。用户错误脚本在 onload 之后或用户似乎与无效 from 交互时加载。

从我的角度来看，您不应该使用用户错误，而是创建自己的类。您可以使用 ':invalid' 选择器简单地检查有效性：

$(this)[ $(this).is(':invalid') ? 'addClass' : 'removeClass']('invalid-value');

只需用类似的代码编写一个函数，并将它们绑定到更改、输入等事件，并在启动时调用它。

如果您仍然想使用用户错误，您可以执行以下操作，但我不建议：

$.webshims.polyfill('forms');
//force webshims to load form-validation module as soon as possible
$.webshims.loader.loadList(['form-validation']);
//wait until form-validation is loaded
$.webshims.ready('DOM form-validation', function(){
    $('input:invalid')
        .filter(function(){
            return !!$(this).val();
        })
        .trigger('refreshvalidityui')
    ;
});
于 2013-05-15T14:37:49.937 回答