Question

我正在处理一个计算表单，并希望在所有字段都填满之前禁用提交按钮。表单由一个数字输入和四个选择选项组成。

虽然我已经调查了一些不同的解决方案，如下所示：

Disabling submit button until all fields have values

Enable submit button only when all fields are filled

出于某种原因，每当我在数字输入中键入一个值时，它会立即覆盖禁用提交按钮，而在启用提交按钮之前也应选择所有选择选项。

我的代码基于上面链接的第二个示例。

    // Check if all fields have been filled out
    // Initially disable submit button
    $('#submit').attr('disabled', 'disabled'); 

     //Check number input for value and compare to select options bind to input keyup, mouseup event
      $("#acre").on('keyup mouseup', function() {
        // check if input has value, search all select options, (id prefixed by #forest) if they have a value set.
        if ($(this).val() != "" && $('[id^=forest]').val() != "" ){
            $('#submit').removeAttr('disabled'); 
        } else {
             $('#submit').attr('disabled', 'disabled'); 
        }

      });
     // Similar for select options
      $('[id^=forest]').on('change', function() {
        if ($(this).val() != "" && $('#acres').val() != "" ){
            $('#submit').removeAttr('disabled'); 
        } else {
             $('#submit').attr('disabled', 'disabled'); 
        }

      });

任何建议都将受到赞赏。

谢谢，

德

Answer 1

如果您将required属性添加到输入标记，则在填写所有必填字段之前，您不会提交。不幸的是，这在Safari中不起作用。它受到包括IE在内的所有其他主流浏览器的支持。这是最简单的解决方案，不需要和javascript。

<input type="text" name="firstname" required>

您可以使用以下代码添加Safari验证。我修改了@snorri中的一些代码。

＆＃13;

$(document).on("submit", function(e) {
  $(this)
    .find("input, select, textarea")
    .filter("[required]")
    .filter(function() {
      return this.value == '';
    })
    .first()
    .each(function() {
      e.preventDefault();
      $(this).css({
        "border-color": "red"
      });
      alert($(this).prev('label').html() + " is required!");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label for="first">First name:</label>
  <input type="text" name="firstname" id="first" required>
  <br>
  <label for="last">Last name:</label>
  <input type="text" name="lastname" id="last" required>
  <br>
  <input type="submit" value="Submit">
</form>

＆＃13;

Answer 2

实际上，Blazemonger对this question的第二个答案解决了我的问题：

  $form = $('#annual-income'); // 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);
});

无论表单包含哪种类型的字段，此解决方案似乎都有效。

Answer 3

我们可以更轻松地解决它并检查类的空输入，以便我们可以修复所需的输入。 Live Link

$(document).on('change keyup', '.required', function(e){
   let Disabled = true;
    $(".required").each(function() {
      let value = this.value
      if ((value)&&(value.trim() !=''))
          {
            Disabled = false
          }else{
            Disabled = true
            return false
          }
    });

   if(Disabled){
        $('.toggle-disabled').prop("disabled", true);
      }else{
        $('.toggle-disabled').prop("disabled", false);
      }
 })

 $(document).on('change keyup', '.required', function(e){
   let Disabled = true;
    $(".required").each(function() {
      let value = this.value
      if ((value)&&(value.trim() !=''))
          {
            Disabled = false
          }else{
            Disabled = true
            return false
          }
    });
   
   if(Disabled){
        $('.toggle-disabled').prop("disabled", true);
      }else{
        $('.toggle-disabled').prop("disabled", false);
      }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="required">
    <option value="" selected disabled>selected a value</option>
    <option>Car</option>
    <option>Buss</option>
    <option>Train</option>
</select>

<select class="required">
    <option value="" selected  disabled>selected a option</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>

<input type="text" class="required" placeholder="Full Name">
<input type="number" class="required" placeholder="Age">

<button type="button" class="toggle-disabled" disabled>Submit</button>

禁用提交按钮，直到所有字段都完成

3 个答案: