Sử dụng jQuery để ngăn chặn việc gửi biểu mẫu khi các trường nhập trống

Question

Giải pháp phải khá đơn giản. Tôi đang cố gắng ngăn chặn biểu mẫu gửi đúng cách khi không tìm thấy giá trị nào trong các hộp nhập liệu. Dưới đây là JSFiddle tôi: http://jsfiddle.net/nArYa/7/

// Markup

<form action="" method="post" name="form" id="form"> 
<input type="text" placeholder="Your email*" name="email" id="email"> 
<input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name" 
<button type="submit" id="signup" value="Sign me up!">Sign Up</button> 
</form> 

// jQuery

if ($.trim($("#email, #user_name").val()) === "") { 
    $('#form').submit(function(e) { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
    }) 
} 

Như bạn có thể nhìn thấy trong JSFiddle, vấn đề là khi tôi gõ cái gì đó vào cả hai lĩnh vực, các hộp cảnh báo STILL bật lên. Tôi đang gặp khó khăn trong việc tìm ra lý do. Có điều gì sai trong số của tôi nếu ($. Trim ($ "# email, #user_name"). Val()) === "")?

Answer 1

Hai điều, # 1 phiếu cho các lĩnh vực có sản phẩm nào nên xảy ra trên tất cả các nỗ lực của gửi, # 2, bạn cần phải kiểm tra từng lĩnh vực riêng

$('#form').submit(function() { 
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") { 
     alert('you did not fill out one of the fields'); 
     return false; 
    } 
}); 

Updated fiddle

Answer 2

Séc của bạn xảy ra khi tải trang. Bạn cần phải kiểm tra trường khi biểu mẫu được gửi.

$('#form').submit(function(e) { 
    if ($.trim($("#email, #user_name").val()) === "") { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
    } 
}); 

Answer 3

Đặt bạn câu lệnh if bên trong gọi lại:

$('#form').submit(function(e) { 
    if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) { 
     e.preventDefault(); 
     alert('you did not fill out one of the fields'); 
     //You can return false here as well 
    } 
}); 

Answer 4

Tôi đoán rằng điều này sẽ giúp:

$('#form').submit(function(e) { 
    e.preventDefault(); 
    $("#email, #user_name").each(function(){ 
     if($.trim(this.value) == ""){ 
      alert('you did not fill out one of the fields'); 
     } else { 
      // Submit 
     } 
    }) 
}) 

Answer 5

HTML5: sử dụng cần trong thẻ đầu vào

• Một thuộc tính boolean.

• Trường nhập phải được điền trước gửi biểu mẫu.

• Làm việc với văn bản, tìm kiếm, url, tel, email, mật khẩu, bộ chọn ngày, số, hộp kiểm, radio và tệp.

  <input required type='text'...> 
  

w3schools hint