禁用提交按钮直到所有表单输入都有数据

Question

我正在尝试禁用提交按钮，并等待所有输入都有数据。目前按钮已被禁用，但在所有输入填充后仍然保持禁用状态。我做错了什么？

$(document).ready(function (){
    validate();
    $('input').on('keyup', validate);
});

function validate(){
    if ($('input').val().length > 0) {
        $("input[type=submit]").prop("disabled", false);
    } else {
        $("input[type=submit]").prop("disabled", true);
    }
} 

- brewpixels

---

$('input').val().length > 0 只检查第一个输入。 - epascarello

你使用的是哪个版本的jQuery？ - Leo Farmer

你有查看浏览器的错误控制台吗（大多数浏览器中按F12键）？如果有报错，是什么错误？ - David Thomas

为什么不使用 required？ - JanLeeYu

Answer 1

这是您代码的修改版，它会检查所有的 <input> 字段，而不仅仅是第一个。

$(document).ready(function() {
  validate();
  $('input').on('keyup', validate);
});

function validate() {
  var inputsWithValues = 0;
  
  // get all input fields except for type='submit'
  var myInputs = $("input:not([type='submit'])");

  myInputs.each(function(e) {
    // if it has a value, increment the counter
    if ($(this).val()) {
      inputsWithValues += 1;
    }
  });

  if (inputsWithValues == myInputs.length) {
    $("input[type=submit]").prop("disabled", false);
  } else {
    $("input[type=submit]").prop("disabled", true);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"><br>
<input type="text"><br>
<input type="text"><br>
<input type="submit" value="Join">

- rphv

---

在给提交按钮赋值后似乎无法正常工作。例如： <input type="submit" value="加入"> - brewpixels

已编辑以排除像<input type='submit'>这样的元素。 - rphv

谢谢，由于我的表单中有隐藏的输入框，所以它无法与我的代码一起运行。因此我添加了以下代码：

var myInputs = $("input:not([type='hidden'])");

- brewpixels

Answer 2

使用纯JavaScript解决方案。

在选择JavaScript标签中提出问题。

HTML表单：

<form action="/signup">
    <div>
        <label for="username">User Name</label>
        <input type="text" name="username" required/>
    </div>
    <div>
        <label for="password">Password</label>
        <input type="password" name="password" />
    </div>
    <div>
        <label for="r_password">Retype Password</label>
        <input type="password" name="r_password" />
    </div>
    <div>
        <label for="email">Email</label>
        <input type="text" name="email" />
    </div>
    <input type="submit" value="Signup" disabled="disabled" />
</form>

JavaScript:

var form = document.querySelector('form')
var inputs = document.querySelectorAll('input')
var required_inputs = document.querySelectorAll('input[required]')
var register = document.querySelector('input[type="submit"]')
form.addEventListener('keyup', function(e) {
    var disabled = false
    inputs.forEach(function(input, index) {
        if (input.value === '' || !input.value.replace(/\s/g, '').length) {
            disabled = true
        }
    })
    if (disabled) {
        register.setAttribute('disabled', 'disabled')
    } else {
        register.removeAttribute('disabled')
    }
})

一些解释：

在这段代码中，我们在HTML表单上添加了keyup事件，并且在每次按键时检查所有输入字段。如果至少有一个输入字段为空或仅包含空格字符，则将true值分配给disabled变量并禁用提交按钮。

如果您需要在填写所有必填输入字段之前禁用提交按钮 - 请替换：

inputs.forEach(function(input, index) {

使用：

required_inputs.forEach(function(input, index) {

其中required_inputs是已经声明的数组，只包含必填的输入字段。

JSFiddle演示：https://jsfiddle.net/ydo7L3m7/

- Mikhail

Answer 3

这里是一个动态代码，检查所有输入是否在提交时都有数据：

    $("form").submit(function(e) {
      var error = 0;
      $('input').removeClass('error');
      $('.require').each(function(index) {
        if ($(this).val() == '' || $(this).val() == ' ') {
          $(this).addClass('error');
          error++;
        }
      });

      if (error > 0) {
        //Means if has error:
        e.preventDefault();
         return false;
      } else {
        return true;
      }


    });

.error {

  border: 1px solid red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<form>

  <form action="google.com">
    <input type="text" placeholder="This is input #1" class="require" />
    <input type="text" placeholder="This is input #2" class="require" />
    <input type="submit" value="submit" />
  </form>


</form>

现在你可以看到，这里有一个名为require的类，你只需要将它赋值给必须具有值的inputs，然后此函数将检查该输入是否具有值，如果这些必填输入为空，则Jquery将防止提交表单！

- Mohammad Kermani

Answer 4

您可以尝试使用 jQuery Validate。

http://jqueryvalidation.org/

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

然后做类似以下的事情：

$('#YourFormName').validate({
    rules: {
        InputName1: {
            required: true
        },
        InputName2: { //etc..
            required: true
        }
    }
});

- Blue Boy

Answer 5

请参考此处的示例。

在你的问题描述中，只考虑了type="text"的input。

HTML：

<div>
    <form>
        <div>
            <label>
                Name:
                <input type="text" name="name">
            </label>
        </div>
        <br>
        <div>
            <label>
                Age:
                <input type="text" name="age">
            </label>
        </div>
        <br>
        <div>
            <input type="submit" value="Submit">
        </div>
    </form>
</div>

JS：

$(document).ready(function () {
    validate();
    $('input').on('keyup check', validate);
});

function validate() {
    var input = $('input');
    var isValid = false;
    $.each(input, function (k, v) {
        if (v.type != "submit") {
            isValid = (k == 0) ?
              v.value ? true : false : isValid && v.value ? true : false;
        }
        if (isValid) {
            $("input[type=submit]").prop("disabled", false);
        } else {
            $("input[type=submit]").prop("disabled", true);
        }
    });
}

- Shashank

Answer 6

尝试将您的函数修改为以下形式：

function validate(){
    if ($('input').val() != '') {
        $("input[type=submit]").prop("disabled", false);
    } else {
        $("input[type=submit]").prop("disabled", true);
    }
} 

在jQuery中，可以使用一些事件触发器，比如onkeyup。而对于普通的js来说，则像这样：

<input type = "text" name = "test" id = "test" onkeyup = "validate();">

对此不太确定，但可能会有所帮助。

- JanLeeYu

Answer 7

修改你的代码

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>
    <input type="submit" value="Join">

    <script>
    $(document).ready(function (){
        validate();
        $('input').on('keyup', validate);
    });

    function validate(){

        $("input[type=text]").each(function(){
            if($(this).val().length > 0)
            {
                $("input[type=submit]").prop("disabled", false);
            }
            else
            {
                $("input[type=submit]").prop("disabled", true);
            }
        });
    } 
    </script>

- Manjeet Barnala

Answer 8

function disabledBtn(_className,_btnName) {
 var inputsWithValues = 0;
 var _f = document.getElementsByClassName(_className);
 for(var i=0; i < _f.length; i++) { 
  if (_f[i].value) {
    inputsWithValues += 1;
  }
 }  
  if (inputsWithValues == _f.length) {
    document.getElementsByName(_btnName)[0].disabled = false;
  } else {
    document.getElementsByName(_btnName)[0].disabled = true;
  }
}

<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="text" class="xxxxx" onKeyUp="disabledBtn('xxxxx','fruit')"><br>
<input type="submit" value="Join" id="yyyyy" disabled name="fruit">

- Sky Blue