JQuery, если форма не заполнена - PullRequest
Новая
       4

JQuery, если форма не заполнена

0 голосов
/ 21 февраля 2012

Мне нужно узнать, все ли поля имеют значение, и если они есть, я хочу активировать кнопку отправки.

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

Форма использует ввод, текстовое поле и выпадающий список.

Ответы [ 3 ]

0 голосов
/ 21 февраля 2012

Если вы не хотите использовать плагин, вы можете сделать что-то простое, как это (примечание: я не проверял это): 

/**
 * Checks to see if all of the values in a form are filled in.
 *
 * @param formId String the id of the form to check (without the #)
 * @return boolean True indicates all form fields are filled in
 */
function checkForm(formId){

  var isFormComplete = true;

  $('#' + formId).find('input,select,textarea').each(function(){
      var formValue = jQuery.trim($(this).val());

      if(!formValue){
          isFormComplete = false;
      }
  });

  return isFormComplete;
}

, а затем при каком-либо событии (вероятно, focus или blur) вы вызываете эту функцию и переключаете кнопку отправки на основе возвращаемого значения.

0 голосов
/ 21 февраля 2012 
var $submit = $('#a-form').find('input[type="submit"]'),
    $inputs = $('#a-form').find('input, textarea').not('[type="submit"], [type="hidden"]');
$inputs.on('change', function () {
    var error = false;
    $.each($inputs, function (index, element) {
        if ($(this).val() == '') {
            error = true;
            $(this).css({ backgroundColor : 'red' });
        } else {
            $(this).css({ backgroundColor : 'white' });
        }
    });
    if (error) {
        $submit.prop('disabled', true);
    } else {
        $submit.prop('disabled', false);
    }
});​

Привязывает обработчик события к входам в форме для события change, которая проверяет значение каждого ввода в форме, если они пусты, кнопка отправки отключена. Это также изменяет background-color любых пустых входов на red.

Вот демоверсия: http://jsfiddle.net/2zjbM/1/

0 голосов
/ 21 февраля 2012

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

разметка: 

<input type="text" id="myTextBox" />
 <input type="text" id="x" />
 <select id="y" />

jquery: 

var valid = $("#myTextBox").val() != "" &&
            $("#x").val() != "" &&
            $("#y").selectedIndex != 0; // if zero would be invalid for a select...

Вы можете включить / отключить кнопку отправки на основе действительных.

...