如果元素爲空，JQuery表單驗證和類更改

Question

我不是JQuery專家。嘗試3天后，除了尋求幫助之外，我別無選擇。

我有一個動態的形式，通過jquery/ajax獲取元素（輸入，選擇，收音機，textarea）。

現在，我想簡單地驗證表單。如果一個元素爲空，那麼表單將不會被提交，並且一個Bootstrap類的「錯誤」將被添加到空元素中。如果沒有任何元素是空的，那麼表單將被提交到所需的php頁面。

這是我迄今

if (($(this).attr("category")) || ($(this).attr("vcmodel"))) { 
    if ($('#category').length) { 
     $('#category').addClass('error'); 
    } 
    if ($('#vcmodel').length) { 
     $('#vcmodel').addClass('error'); 
    } 
    if ((($(this).attr("category")) && ($('#category').length)) || (($(this).attr("vcmodel")) && ($('#vcmodel').length))) { 
     return false; 
    } 
} 

Answer 1

好了，只給你一個想法，也許你可以做這樣的事情：

$("#submit").on("click", function(e) { 
    var category = $("#category"); 
    if(category.val() === "") { 
     category.addClass("error"); 

     // don't submit ! 
     e.preventDefault(); 
    } 
}); 

這裏是一個fiddle

Answer 2

做，你可以嘗試jQuery驗證插件。否則你會嘗試這種類型的方法。

$(document).ready(function(){ 
    $(document).on('submit','form',function(e){ 
     e.preventDefault(); 
     var $this = $(this); 
     var valid; 
     valid = true; 
     $('.yourInputClass').each(function(){ 
      var value = $(this).val(); 
      if(value == ''){ 
       valid = false; 
       $(this).addClass('error');    
      } 
     }); 
     if(valid){ 
      $this.submit(); 
     } 
    }); 
});