Question

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

我jQuery。我的控件和调用focus（）和blur（），有没有比这更好的方法？我试图调用ctrl.checkValidity（），但它并不总是定义。如果是，它仍然没有标记控件。
我似乎也有计时问题，而焦点和模糊（）触发，UI不会更新。就好像Webshims还没有完全加载，即使这会在$ .webshims.ready事件中触发。
我也尝试调用$（'＃form'）。submit（），但这并没有像我预期的那样触发事件。我能做到这一点的唯一方法是包含一个输入类型='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文件的错误。

Answer 1

这与以下事实有关：您正在尝试重用.user-error类，这是CSS4：用户错误的“垫片”，不应该从脚本触发。用户错误脚本在onload之后加载，或者在用户似乎与来自。

的无效内容交互时加载

从我的角度来看，你不应该使用用户错误而是创建自己的类。您只需使用'：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')
    ;
});

Webshims - 在初始加载时显示无效的表单字段

1 个答案: