如何檢查所有欄位是否有效？

Question

這段代碼檢查每個元素是否有效，它追加的CSS類取決於它的情況。 如果元素有效，它會從提交按鈕（blocksender）中刪除禁用的標記。

但是， 如果某個元素有效且某個元素無效 如果您從有效元素進行聚焦，則會啓用提交按鈕。這是一個問題。

如何檢查所有元素？如果它們都是有效的，我可以啓用提交按鈕。

$(document).on('focusout', 'input.validate, textarea.validate', function() { 

    if ($(this).hasClass('is_required') || $(this).val().length) 
    { 

     var result = window['validate_'+$(this).attr('data-validate')]($(this).val()) 

     if (result) 
     { 
      $(this).parent().removeClass('form-error').addClass('form-ok'); 
      $(".blocksender").removeAttr("disabled", "disabled"); 

     } 
     else 
     { 
      $(this).parent().addClass('form-error').removeClass('form-ok'); 
      $(".blocksender").attr("disabled", "disabled"); 
     } 
    } 
}); 

這是validate.js中的Prestashop 1.6和我使用它contact_form.tpl類似的東西：

<input class="validate is_required" type="text" id="email" name="from" data-validate="isEmail"/> 

Answer 1

我會數數與錯誤類別的元素：如果它是0，則啓用按鈕，如果不是，則禁用它

$(document).on('focusout', 'input.validate, textarea.validate', function() { 

    if ($(this).hasClass('is_required') || $(this).val().length) 
    { 

     var result = window['validate_'+$(this).attr('data-validate')]($(this).val()) 

     if (result) 
     { 
      $(this).parent().removeClass('form-error').addClass('form-ok'); 

      // There's the chance of no errors, check it. 
      var numItems = $('.form-error').length;// Check number of elements with class error. 

      if(numItems === 0) {// If all items are ok, remove disable. 
       $(".blocksender").removeAttr("disabled", "disabled"); 
      } 
     } 
     else// There's at least one error, no need to check, disable it. 
     { 
      $(this).parent().addClass('form-error').removeClass('form-ok'); 
      $(".blocksender").attr("disabled", "disabled"); 
     } 
    } 
});