Отключить отправку, если входные данные пустые jquery - PullRequest
Новая
       4

Отключить отправку, если входные данные пустые jquery

7 голосов
/ 12 марта 2012

Отказ от ответственности: я знаю, что есть довольно много вопросов по этой теме, и она была высоко оценена, хотя мне нужна помощь в моем конкретном случае.

Я пытаюсь проверить, не являются ли введенные значения пустыми, а затем отключить кнопку отправки.

Мой HTML-фрагмент: 

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" />
    </div>
  </form>
</div>

Я использовал пример ответа из здесь с некоторыми изменениями: 

(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', true);
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
})()

Любая помощь будет принята с благодарностью!

Ответы [ 3 ]

20 голосов
/ 12 марта 2012

Я бы предложил отключить кнопку по умолчанию. Я бы также посмотрел на длину .val(), а не на пустую строку. Наконец, я думаю, что document.ready() гораздо более читабелен, чем ваш существующий код: вот полный код:

HTML 

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>​

JS / JQuery 

$(document).ready(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val().length == 0) {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', 'disabled');
        } else {
            $('.actions input').removeAttr('disabled');
        }
    });
});

Вот рабочая скрипка .

0 голосов
/ 21 сентября 2018

Вы можете написать это так вместо использования условий "если" 

$('button[type=submit]').prop('disabled', empty);
0 голосов
/ 26 января 2017

Я использую это в своем проекте, и это успешно. 

$(document).ready(function() {
  $('.field').keyup(function() {

    var empty = false;
    $('.field').each(function() {
        if ($(this).val().length == 0) {
            empty = true;
        }
    });                   

    if (empty) {
        $('.actions[type="submit"]').attr('disabled', 'disabled');
    } else {
        $('.actions[type="submit"]').removeAttr('disabled');
    }                
  });
});
...