javascript - 验证失败后表单仍然提交 JS

Question

我有一个表单，我试图验证具有相同类的字段。需要

<form id="HotelBooking" method="post" action="#">
<input type="text" class="required"  name="vardas" />
<input type="text" class="required"  name="pav" />
<input type="text" class="required"  name="tel" />
<input type="submit"  name="sb"  value="Tvirtinti" onclick="tikrinti();"/>
</form>

JS 代码适用于第一个字段，它显示错误，但表单仍然提交并重置字段。

$(document).ready(function() { 
  $('#HotelBooking').submit(function () {
  $(".required").each(function(){
            if($(this).val().length == 0)
            {
               alert('Please Enter your value');
               $(this).focus(); 
               return false;
            }
        });
 });   
});

我做错了什么？

Answer 1

你应该把 return false 放在 each() 之外:

$('#HotelBooking').submit(function () {
    var errors = 0
    $(".required").each(function(){
        if( $.trim($(this).val()).length == 0) { // make sure that there is no extra whitespace
           errors++ 
        }
    });
    if (errors > 0) {
       alert('please Enter your value for ' +errors+ 'remaining fields')
       return false;
    } 
});