如何使用 jQuery 检查所有表单字段是否包含值

Question

我需要知道是否所有字段都有值，如果有，我想激活提交按钮。

我看过插件，但我不知道我需要/应该使用哪一个。

该表单使用输入、文本框和下拉选择。

Answer 1

如果你不想使用插件，你可以做一些简单的事情，比如这样（注意：我还没有测试过这个）：

/**
 * 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) 您调用此函数，并根据返回值切换提交按钮。

Answer 2

你可以使用jquery通过控件的id来选择你想要的控件。我建议这样做而不是必须支持插件——这对你来说本质上可能是一个黑匣子。

标记：

<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...

您可以根据有效启用/禁用提交按钮。

Answer 3

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 事件的输入表单，该事件检查表单中每个输入的值，如果有空白，则禁用提交按钮。它还会将任何空白输入的背景颜色更改为红色。

这是一个演示： http://jsfiddle.net/2zjbM/1/