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