如何检查表单是否为空，如果表单为空，则将disabled =“disabled”设置为提交按钮？

Question

如何检查表单是否为空，如果表单为空，则将disabled="disabled"设置为提交按钮？

<form action="/contact/" method="POST" id="form">
    <input type="text" id="name" name="name" class="form-control" placeholder="Name">
    <input type="email" id="email" name="email" class="form-control" placeholder="E-Mail">
    <textarea name="msg" id="msg" class="form-control" rows="4" placeholder="Message"></textarea>
    <input type="submit" value="Send" class="button-contac-send">
</form>

Answer 1

我会告诉你如何做到这一点，然后尝试让它发挥作用。如果您在这里努力发布代码，我们会帮忙。您可以使用Jquery或在文本框中添加必填字段验证器来执行此操作。

如果你走下JQuery路线，点击你的提交按钮（你需要先给它一个ID属性）检查这些字段是否都是空的。如果他们是那么你可以说返回false。这将取消提交事件。

Answer 2

有几个图书馆和原生APIS处理值得利用的客户端验证

HTML 5 Form Validation

您可以在任何输入中使用required属性，浏览器将阻止客户端提交：

<input id="name" name="name" required >

对于更高级的处理，您还可以使用Constraint Validation API

连接Javascript

jQuery Validate

另一个流行的客户端验证框架是jQuery Validation Plugin

自定义JavaScript

如果您想自己编写...假设所有字段都是必需的，您需要将更改事件捕获到所有输入，验证所有输入都有值，然后在提交按钮上有条件地切换禁用的属性。在jQuery中，它看起来像这样：

// get all input elements and attach listener
var $inputs = $("#myForm :input:not([type='submit'])")
$inputs.change(function() {

  // check if all elements have value
  var allInputsHaveValue = $inputs.toArray().every(function(el) {
    return !!el.value
  });

  // toggle submit disabled
  $("#submit").prop("disabled", !allInputsHaveValue);

}).change(); // run on init

Demo in jsFiddle