Использование jQuery для предотвращения отправки формы при полях ввода

Question

Решение должно быть довольно простым. Я стараюсь, чтобы форма не отправлялась правильно, когда в ящиках ввода нет значения. Вот мой JSFiddle: 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'); 
    }) 
} 

Как вы можете видеть в JSFiddle, проблема в том, что, когда я печатаю что-то в обоих полях появится окно предупреждения STILL. Я с трудом понимаю, почему. Что-то не так в моем if ($. Trim ($ "# email, #user_name"). Val()) === "")?

Answer 1

Две вещи, # 1 проверка на наличие пустых полей должно происходить на каждой попытке представить, # 2, Вы должны проверить каждое поле индивидуально

$('#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

Ваш чек происходит при загрузке страницы. При отправке формы необходимо проверить поле.

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

Answer 3

Положите ваш, если заявление внутри обратного вызова:

$('#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

Я думаю, что это поможет:

$('#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: использовать необходимый во входном теге

• Логический атрибут.

• Поле ввода должно быть заполнено до , отправив.

• Работает с текстом, поиском, адресом, телефоном, электронной почтой, паролем, сборщиками даты, числом, флажком, радио и файлом.

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

w3schools hint