Question

我有一个ASPX表单，如果六个特定字段中的任何一个为空，我需要禁用提交按钮。我试图通过Javascript或jQuery来做到这一点，但到目前为止，我只能找到表单上的单个字段为空的示例，或表单上的所有字段。就我而言，我并不关心几个领域 - 只有六个领域。

所以基本上，我有六个条件和一个动作。我找到了一个例子，但它将六个不同的IF语句串联起来。如果可能的话，我想找一个更简化的方法。因此，例如，我可能会为单个字段执行此操作...但是如何为field2，field3，field4等执行此操作？

$(document).ready(function(){
  $('#submit_btn').prop('disabled',true); 
  $('#field1').keyup(function(){ 
      $('#submit_btn').prop('disabled'); 
  }) 
});

使用Javascript或jQuery，如果六个输入字段中的任何一个为空白，那么禁用输入按钮的最有效方法是什么？

Answer 1

如果您的要求允许，您可以使用HTML 5 field validation。浏览器不允许表单提交。

<form>
  <label for="choose">Foo</label>
  <input name="bar" required>
  <input type="submit" /> <!-- <--- This will generate an error message if the user clicks it when the field is empty -->
</form>

Answer 2

你的开始是正确的;创建一个包含六个变量的数组，每个字段对应一个，并创建一个新函数来验证每个keyup上调用的所有内容。所以你会有

var[] array

$('#field1').keyup(function() {
    array[0] = $('#field1').val();
    validate();
}
${'#field2').keyup(function() {
    array[1] = $('#field2').val();
    validate();
}

...create one each for each field

function validate() {
    for (var i = 0; i < array.length; i++) {
        if(!arrays[i]) {
            $('#submit_btn').prop('disabled');
            return;
        }
    }
    $('#submit_btn').prop('enabled'):
}

这样做是为了监听更改字段并更新数组。一个空白值是假的，所以你可以通过数组并禁用按钮，如果它是空白或null或其他什么。在这种情况下，摆脱for循环;你不在乎别的什么。如果没有任何东西禁用按钮并打破for循环，则它有效并且按钮已启用。

这种方法很有用，因为它易于扩展。如果要在不重写验证函数的情况下检查它们，可以将额外的东西推入数组中。

这假设您不想仅使用标准表单验证并手动执行。

Answer 3

您可以为所有元素添加相同的类名，然后执行验证foreach类元素。与下面的代码一样，我使用class="valid"为需要验证的所有输入添加了相同的类名，然后使用jquery 类选择器和 {{1}用于控制按钮状态的方法。

＆＃13;

keyup

＆＃13;

(function() {
    $('.valid').keyup(function() {

        var isEmpty = false;
        $('.valid').each(function() {
            if ($(this).val() == '') {
                isEmpty = true;
            }
        });

        if (isEmpty) {
            $('#button1').attr('disabled', 'disabled');
        } else {
            $('#button1').removeAttr('disabled');
        }
    });
})()

＆＃13;

Answer 4

为每个必需的输入添加一个公共类。然后根据值不为空的过滤对象的长度检查该对象的长度。然后，您可以使用该条件将按钮的prop值设置为true / false。

http://api.jquery.com/filter/

<强> JQuery的：

$('form .required-valid').on('input paste change', function() {
  var $required = $('form .required-valid');

  //filter required inputs to only ones that have a value.
  var $valid = $required.filter(function() {
    return this.value != '';
  });

    //set disabled prop to false if valid input count is != required input count
  $('#submit_btn').prop('disabled', $valid.length != $required.length);

});

<强> HTML：

<form>
  <label>Field1</label>
  <input type="text" id="field1" class="required-valid" />
  <label>Field2</label>
  <input type="text" id="field2" class="required-valid" />
  <label>Field3</label>
  <input type="text" id="field3" class="required-valid" />
  <label>Field4</label>
  <input type="text" id="field4" class="required-valid" />
  <label>Field5</label>
  <input type="text" id="field5" class="required-valid" />
  <label>Field6</label>
  <input type="text" id="field6" class="required-valid" />
  <label>Field7</label>
  <input type="text" id="field7" class="not-required" placeholder="not required" />
  <button id="submit_btn" disabled>
    Submit
  </button>

</form>

示例：

https://jsfiddle.net/SeanWessell/q2msc80L/

Answer 5

$(document).ready(function() {
  $('#submit_btn').prop('disabled', true);

  $('#field1').keyup(function() { // on keyup
    var value = $(this).val(); // retrieve the value of the input

    if (value.length == 0) // if the value's length is 0 (empty)
      $('#submit_btn').prop('disabled', true); // disable the button
    else // if not
      $('#submit_btn').prop('disabled', false); // enable it
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="field1"/>
  <input id="submit_btn" type="submit"/>
</form>

注意表单可以使用回车键提交，因此，如果您选中keyup，最好不要检查每个onsubmit。

禁用按钮，除非特定字段具有值

5 个答案: