Проверьте, не вставляются ли входы с помощью jQuery перед отправкой

Question

У меня есть форма, в которой я бы хотел, чтобы все поля были заполнены. Если поле щелкнуто и не заполнено, я бы хотел показать, что в bootstrap есть класс предупреждения.

Вот мой код:

$('#registration-form input').blur(function() 
{ 
    if(!$(this).val()) { 
     $(this).parents('li').addClass('has-warning'); 
    } 
}); 

Что я делаю неправильно?

Вот jsfiddle http://jsfiddle.net/f7gsgy93/

Answer 1

$('#registration-form input').blur(function() { 

    if ($(this).val() == '') { 

     $(this).parents('li').addClass('has-warning'); 

    } 

}); 

Answer 2

Вы должны поймать submit событие на форме. Если вход недействителен, то предотвратите поведение по умолчанию.

$("form").on("submit", function() { 
    var isInvalid = false; 
    $("input", this).each(function() { 
     if (!$(this).val()) { 
      isInvalid = true; 
     } 
    }); 
    if (isInvalid) { 
     return false; 
    } 
}); 

Если вам нужно только поймать событие размытия, просто сделайте это!

$(document).ready(function() { 
 
    var $error = $(".alert-danger"); 
 
    $("form input").on("blur", function() { 
 
    if (!$(this).val()) { 
 
     $error.removeClass("hide").text("No value"); 
 
    } else { 
 
     $error.addClass("hide"); 
 
    } 
 
    }); 
 
});

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <form action=""> 
 
    <input type="text" class="form-control" placeholder="Text input"> 
 
    <div class="errors"> 
 
     <div class="alert alert-danger hide"></div> 
 
    </div> 
 
    </form> 
 
</div>