Как использовать jQuery, чтобы отключить кнопку отправки формы до тех пор, пока не будут заполнены все обязательные поля?

Question

У меня есть форма с несколькими входами, полями выбора и текстовой областью. Я хотел бы отключить кнопку отправки до тех пор, пока все поля, которые я обозначу как обязательные, не будут заполнены значением. И после того, как все они заполнены, если поле, в котором поле WAS удалено пользователем, я бы хотел, чтобы кнопка отправки снова стала отключенной.

Как мне это сделать с помощью jQuery?

Answer 1

Думаю, мой первый инстинкт - запускать функцию всякий раз, когда пользователь начинает изменять любой из входов.Примерно так:

$('#submitBtn').prop('disabled', true);
$('.requiredInput').change(function() {
   inspectAllInputFields();
});

Тогда у нас будет функция, которая проверяет каждый вход и, если они проверены, тогда активирует кнопку отправки ...

function inspectAllInputFields(){
     var count = 0;
     $('.requiredInput').each(function(i){
       if( $(this).val() === '') {
           //show a warning?
           count++;
        }
        if(count == 0){
          $('#submitBtn').prop('disabled', false);
        }else {
          $('#submitBtn').prop('disabled', true);
        }

    });
}

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

 inspectAllInputFields();

Надеюсь, это поможет, ~ Мэтт

Answer 2

Вот что-то всеобъемлющее, просто потому что:

$(document).ready(function() {
    $form = $('#formid'); // cache
    $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
    $form.find(':input').change(function() { // monitor all inputs for changes
        var disable = false;
        $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
            if ($.trim(el.value) === '') {
                disable = true; // disable submit if any of them are still blank
            }
        });
        $form.find(':input[type="submit"]').prop('disabled', disable);
    });
});

http://jsfiddle.net/mblase75/xtPhk/1/

Answer 3

Я рекомендую использовать немного другой подход и использовать проверку jquery http://docs.jquery.com/Plugins/validation. Тактика, которую вы предлагаете, подвержена дырам в безопасности.Пользователь может легко с помощью firebug включить эту кнопку и затем отправить форму.

Использование проверки jquery чисто и позволяет отображать сообщения об ошибках в обязательных полях, если это необходимо при отправке.

Answer 4

Идея от меня:

• Определите переменную - с глобальной областью действия - и добавьте значение true. Напишите в проверке функцию отправки значения выше varibale.Оцените только событие submit, если значение равно true.
• Напишите функцию, которая проверяет все значения из полей ввода и выбирает поля.Проверка длины значения до нуля.если длина значения одного поля равна нулю, измените значение глобальной переменной на false.
• После этого добавьте во все поля ввода событие 'onKeydown' или 'onKeyUp', а для всех блоков выбора - событие 'onChange '.

Answer 5

Пуск с отключенной кнопкой (очевидно). Привязать событие onkeyup к каждому необходимому текстовому вводу и onchange или onclick к полям выбора (и любым переключателям / флажкам), и при его запуске проверить, заполнены ли все необходимые вводы. Если это так, включите кнопку. Если нет, отключите его.

Здесь есть одна лазейка. Пользователи могут удалить значение текстового поля, не вызывая событие onkeyup, используя мышь для «вырезания» текста или удерживая нажатой клавишу удаления / возврата, когда они все удалили, и нажимая кнопку перед удалением. это.

Вы можете обойти второй, либо

• отключение кнопки с помощью onkeydown и проверка работоспособности onkeyup
• проверка на действительность при нажатии кнопки

Answer 6

Установите отключенный атрибут на кнопку отправки.Например:

$('input:submit').attr('disabled', 'disabled');

И использовать событие .change () в полях формы.