Возврат false при пустом вводе работает только на одном входе, а не на обоих - PullRequest
Новая
       46

Возврат false при пустом вводе работает только на одном входе, а не на обоих

0 голосов
/ 21 мая 2018

Я пытаюсь проверить, не заполнены ли одно или оба поля перед отправкой с помощью jQuery.Если какие-либо входы пусты, это должно предупредить пользователя, иначе перейдите к функции ajax.Если я заполняю поле имени пользователя, оно не смотрит на поле пароля.Однако, если я оставлю поле имени пользователя пустым, отобразится правильное диалоговое окно, и он не выполнит сценарий ajax.Я неправильно использую функцию .each ()?

html: 

    <div id="dialog_success" title="Success">
    <p></p>
</div>
<div id="dialog_error" title="Error">
    <p>If you see this text, check your jQuery.</p>
</div>
<div class="container">
    <h2 class="form-heading">Create New User</h2>
    <form id="insert_user_form" method="post" action="create_user.php" autocomplete="off">
        <div class="container">
            <label for="username">Username</label>
            <input id="username_input" type="text" placeholder="Enter Username" name="username" autofocus>
            <label for="password">Password</label>
            <input type="password" placeholder="Enter Password" name="password">
            <button id="create_user_btn" type="submit">Submit</button>
        </div>
    </form>
</div>

JQuery и часть ajax: 

$('#insert_user_form').submit(function (e) {
    e.preventDefault();
    $(':input').each(function () {

        if ($(this).val() === "") {
            $('#dialog_error').dialog("open");
            $('.ui-widget-overlay').css({'background': 'red', 'opacity': '0.7'});
            $('#dialog_error p').text("Please fill out all fields.");
            return false;
        }
        else {

            $.ajax({
                type: 'POST',
                //Begin the ajax

Я также пытался: 

if($(this).length === 0)

, но этовсе еще не работал.

1 Ответ

0 голосов
/ 21 мая 2018

Как уже упоминалось, вы должны сделать AJAX-вызов после проверки всех входов.Один простой способ сделать это с помощью переменной, действующей как флаг. 

$('#insert_user_form').submit(function (e) {
    e.preventDefault();
    var isempty = false;
    $(':input:not(button)').each(function () {

        if ($(this).val() === "") {
            $('#dialog_error').dialog("open");
            $('.ui-widget-overlay').css({'background': 'red', 'opacity': '0.7'});
            $('#dialog_error p').text("Please fill out all fields.");

            isempty = true;
        }
    });
    if(!isempty){
        //Do your ajax
        // ...

Таким образом, переменная isempty будет иметь значение false, если все входные данные заполнены, и true, если хотя бы один isn 't.

Кроме того, $(':input') также захватит ваш button, поэтому вы можете исключить его с помощью селектора :not.

...