javascript - 确定所有表单字段是否完整

Question

问题

我试图确定表单的所有输入字段是否已完成，以便我可以从提交按钮中删除Class .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;
}

我在哪里

我在下面编写了这个片段，它使用了点击处理程序，但我很确定这不是正确的方法，因为人们必须实际点击才能确定字段是否已填写，而且也没有考虑到如果有人通过表单选项卡，则为帐户。

脚本.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

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

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.