jQuery不停止形式從beign提交

Question

我有一個表單，當提交時，如果任何字段是空的id，以防止提交併添加一個類的字段。

由於某種原因，我似乎無法得到它的工作，我添加了一個小提琴，任何人都可以指出我的錯在哪裏？

http://jsfiddle.net/yycqW/

Answer 1

你的小提琴有幾個問題。首先，你還沒有關閉ready事件處理程序。其次，將$this傳遞給undefined的jQuery。您需要改爲通過this。

最後，表格總是要提交，因爲您必須實際停止提交。您可以調用事件對象的preventDefault方法來執行此操作。這是你的代碼的新版本：

$(document).ready(function(){ 
    $("#form").submit(function(e) { 
     $('input').each(function() { 
      if ($(this).val() == '') { //Pass this into jQuery, not $this 
       $(this).addClass('highlight'); 
       e.preventDefault(); //Stop the form from submitting 
      } 
     });    
    }); 
}); 

另外請注意，它是不需要使用$(this).val()的each循環中。 this將是對DOM元素的引用，並且該元素將具有value屬性，因此僅使用this.value會更有效。

Answer 2

你不是從實際提交停止形式，因此它仍然被公佈（因此立即丟棄你的亮點）。嘗試將preventDefault方法添加到表單中，並在檢查錯誤後手動提交。

Answer 3

除了不打電話preventDefault，您在一個地方使用$this而不是this和括號不匹配。工作版本：

http://jsfiddle.net/yycqW/7/

Answer 4

$(document).ready(function() { 
    $("#form").submit(function(e, a) { 
     $('input, textarea', this).each(function() { 
      if (!$(this).val()) { 
       $(this).addClass('highlight'); 
       e.preventDefault(); 
      } else($(this).hasClass('highlight')) ? $(this).removeClass('highlight') : false; // remove class on valid 
     }); 
    }); 
}); 

Answer 5

而不是preventDefault（）方法，返回false提交因此也無法提交時調用形式的功能。在前面的答案中，讓我們認爲有多個空字段，preventDefault（）將被不必要地解僱多次。

我會用這樣的事情作爲一個清潔的解決方案：

$(document).ready(function(){ 
    $("#form").submit(function(e) { 
      var submit=true; //A flag that we'll return 
      $('input').each(function() { 
       if ($(this).val() == '') { 
        $(this).addClass('highlight'); 
        submit=false //Setting the flag to false will prevent form to be submitted 
       } 
      }); 
      return submit; 
    }); 
});