Javascript 确定所有表单字段是否完整 问题

我正在尝试确定表单的所有输入字段是否已完成，以便我可以从submit按钮中删除类

。该类已禁用

，以允许用户提交表单

我已经研究过类似的问题，，但我不确定这是否完全确定它在做什么，尽管它听起来很接近我想要的

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;
}

使用

当元素的值更改时，将更改事件发送到元素

使用

.on（'input'

），以便在输入发生变化时立即更新。此外，对于

var emptyFields

，请确保您的

submit

按钮具有值或指定

$（'input[type=text]

$（“输入，选择”）。在（“输入”，函数（）上{
//筛选空表单字段
//$（“输入[type=text]，--如果提交按钮没有值
var emptyFields=$（“输入，选择”）.filter（函数（）{
return！this.value.trim（）；
}).长度；
if（emptyFields==0）{
$（“.button_uusubmit”）.removeClass（“已禁用”）；
$（“.button_uusubmit”）.addClass（“处于活动状态”）；
$（“.check--two”）.css（“颜色”，“ffdc00”）；
}否则{
$（“.button_uusubmit”）.removeClass（“处于活动状态”）；
$（“.button_uusubmit”）.addClass（“已禁用”）；
$（“.check--two”）.css（“color”，“#ccc”）；
}
})；

年轻人
成人
中年
老人

如果不需要支持旧浏览器，可以使用

输入事件。
如果需要，可以使用
keyup event
进行输入，使用
change event
进行选择

Html
我建议您使用易于集成且运行良好的jquery验证插件：
通过使用HTML5验证功能，您可以在不使用JavaScript的情况下执行此操作

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

// 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");
    }
});

$("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");
    }
});

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

$(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);

})