弄清楚所有表单字段是否完整

Question

问题

我正在尝试弄清楚表单的所有输入字段是否都已完成，因此我可以从提交按钮中删除类.is-disabled以允许用户提交表单。

我看过同样提出的问题， "Submit form only if all required fields are full?" ，但我不确定这完全确定它在做什么，虽然听起来接近我想要的？

this.validate_form = function(form){
    for (var i = 0; i < form.elements.length; i++){
        if(form.elements[i].value == "" && form.elements[i].getAttribute("name") && form.elements[i].hasAttribute("required"))
        {
            return false;
        }
    }
    return true;
}

我在哪里

我在下面写了这个代码片段，它使用了一个点击处理程序，但我很确定这不是正确的方法，因为此人必须实际点击以确定字段是否已填写，且是否也未考虑如果有人通过表单标记了帐户。

scripts.js中

// If any input is clicked run the following
$("input, select").on("click", function(){

    // Filters empty form fields
    var emptyFields = $("input, select").filter(function () {
        return !this.value.trim();
    }).length;

    if (emptyFields == 0) {
        $(".button__submit").removeClass("is-disabled");
        $(".button__submit").addClass("is-active");
        $(".check--two").css("color", "#ffdc00");
    } else {
        $(".button__submit").removeClass("is-active");
        $(".button__submit").addClass("is-disabled");
        $(".check--two").css("color", "#ccc");
    }
});

Answer 1

如果您不需要支持旧浏览器，则可以使用input event。 如果需要，您可以使用keyup event进行输入，使用change event进行选择。

HTML

<form>
  <input >
  <select>
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <button disabled="true">Submit</button>
</form>

的Javascript

$(function(){

  function validate(){
    var invalids = $('input, select').filter(function(){
      return !this.value.trim();
    });
    $('button').attr('disabled', invalids.length>0);
  }

  $('input').on('keyup', validate);
  $('select').on('change', validate);

})

Demo is here.

Answer 2

使用.on("change")

  

更改事件在其值更改时发送到元素。

$("input, select").on("change", function(){

    // Filters empty form fields
    var emptyFields = $("input, select").filter(function () {
        return !this.value.trim();
    }).length;

    if (emptyFields == 0) {
        $(".button__submit").removeClass("is-disabled");
        $(".button__submit").addClass("is-active");
        $(".check--two").css("color", "#ffdc00");
    } else {
        $(".button__submit").removeClass("is-active");
        $(".button__submit").addClass("is-disabled");
        $(".check--two").css("color", "#ccc");
    }
});

Answer 3

使用.on('input'，以便在输入更改后立即更新。同样适用于var emptyFields，请确保您的submit按钮具有值或指定$('input[type=text]

＆＃13;

＆＃13;

$("input, select").on("input", function() {

  // Filters empty form fields
  //                $("input[type=text], --if submit button has no value
  var emptyFields = $("input, select").filter(function() {
    return !this.value.trim();
  }).length;
  if (emptyFields == 0) {
    $(".button__submit").removeClass("is-disabled");
    $(".button__submit").addClass("is-active");
    $(".check--two").css("color", "#ffdc00");
  } else {
    $(".button__submit").removeClass("is-active");
    $(".button__submit").addClass("is-disabled");
    $(".check--two").css("color", "#ccc");
  }
});

＆＃13;

<form>
  <input type='text' placeholder='First Name'>
  <input type='text' placeholder='Last Name'>
  <select>
    <option value="1-17">Youngster</option>
    <option value="18-25">Adult</option>
    <option value="26-50">Mid-life</option>
    <option value="51+">Old person</option>
  </select>
  <input type='submit' value='submit' class='is-disabled button__submit button__submit'>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我建议您使用 jquery验证插件，它易于集成并且效果很好： http://jqueryvalidation.org/

Answer 5

您可以使用HTML5验证功能在没有JavaScript的情况下执行此操作。

具体来说，在输入中添加“required”属性并更新CSS以使用：valid和：invalid伪类。