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

Решение должно быть довольно простым. Я стараюсь, чтобы форма не отправлялась правильно, когда в ящиках ввода нет значения. Здесь мой JSFiddle: http://jsfiddle.net/nArYa/7/

//Разметка

<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()) === "")?

Ответ 1

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

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

Обновленная скрипка

Ответ 2

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

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

Ответ 3

Я предполагаю, что это поможет:

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

Ответ 4

HTML5: используйте required в теге ввода

Атрибут boolean.
Поле ввода должно быть заполнено до отправки формы.
Работает с текстом, поиском, URL-адресом, телефоном, электронной почтой, паролем, сборщиками даты, числом, флажком, радио и файлом.
```
<input required type='text'...>
```

подсказка w3schools

Ответ 5

Поместите оператор if внутри обратного вызова:

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