Webshims - 初始加载

Question

显示无效的表单字段（上问题请遵循Placeholder Hidden）

我想我的形式加载时，以验证现有的数据。我似乎无法让这样的事情发生

• 我在我的控制jQuery.each并调用焦点（）和模糊（），有没有比这更好的办法？我试图调用ctrl.checkValidity（），但它并不总是定义。当它是，它仍然没有标记的控制。
• 我似乎也有一个时间问题，而焦点和模糊（）火，UI不更新。就好像Webshim尚未完全加载，尽管这会引发$ .webshims.ready事件。
• 我也尝试调用$（'＃form'）。submit（），但是这并不像我预期的那样触发事件。我能做到的唯一方法就是包含一个输入类型='submit'。我如何可以像点击提交按钮那样务实地进行表单验证呢？

这里有一个jsFiddle演示该问题。当表单加载时，我想将无效的电子邮件标记为这样。如果你点击添加按钮，它会被标记，但最初加载时不会。为什么？

• 焦点和模糊的控制将导致其被标记。

• 但是，点击添加也会（它运行与它被加载时运行相同的方法）。它为什么第二次运行，但最初加载时不运行？

  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次点击添加。但是，由于MIME类型不匹配，我收到了一些我喜欢的js文件的错误。

Answer 1

这与您尝试重用.user-error类的事实有关，它是CSS4：user-error的“填充程序”，不应从脚本触发。用户错误脚本在onload之后或用户似乎与无效from进行交互时加载。

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

$(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') 
    ; 
});