在表单中启用按钮之前填写必填字段

Question

我有一个表格。我需要所有必填字段都有一个值，然后才能启用按钮。目前，我在继续按钮上有一个按钮类，可以禁用它。我不希望使用必需的属性或使其成为输入字段而不是按钮。这是一个较大项目的表格，我必须使用此按钮。无论如何，我希望该按钮在所有必填字段都有一些值时删除禁用的类。在我的项目中，它不必是特定的值。现在我只是检查以确保它不是空的。我的 JQuery 不起作用，我不知道为什么。我只希望按钮在要求的所有字段都包含一个值时删除该类。任何值。这是我的代码：

            <form id="customer-form" name="customer-form" action="" method="post">
                <div class="row">
                    <div class="col-12 col-md-6">
                        <input type="text" id="f-name" name="full-name" placeholder="Full Name*" onblur="if (this.placeholder == '') {this.placeholder = 'Full Name*';}" onfocus="if (this.placeholder == 'Full Name*') {this.placeholder = '';}">
                    </div>
                    <div class="col-12 col-md-6">
                        <input type="text" id="job" name="job" placeholder="Profession / Job Title*" onblur="if (this.placeholder == '') {this.placeholder = 'Profession / Job Title*';}" onfocus="if (this.placeholder == 'Profession / Job Title*') {this.placeholder = '';}">
                    </div>
                    <div class="col-12 col-md-6">
                        <input type="text" name="company-name" placeholder="Company Name*" onblur="if (this.placeholder == '') {this.placeholder = 'Company Name*';}" onfocus="if (this.placeholder == 'Company Name*') {this.placeholder = '';}">
                    </div>
                    <div class="col-12 col-md-6">
                        <input type="text" name="project-name" placeholder="Project Name" onblur="if (this.placeholder == '') {this.placeholder = 'Project Name';}" onfocus="if (this.placeholder == 'Project Name') {this.placeholder = '';}">
                    </div>
                    <div class="col-12 col-md-6">
                        <input type="text" name="phone" placeholder="Phone*" onblur="if (this.placeholder == '') {this.placeholder = 'Phone*';}" onfocus="if (this.placeholder == 'Phone*') {this.placeholder = '';}">
                    </div>
                    <div class="col-12 col-md-6">
                        <input type="text" name="email-address" placeholder="Email Address*" onblur="if (this.placeholder == '') {this.placeholder = 'Email Address*';}" onfocus="if (this.placeholder == 'Email Address*') {this.placeholder = '';}">
                    </div>
                    <div class="col-12 col-md-4">
                        <span>Date of Request*</span>
                        <input type="text" placeholder="Select a Date" class="input-type-date datepicker-here" data-language="en" onblur="if (this.placeholder == '') {this.placeholder = 'Select a Date';}" onfocus="if (this.placeholder == 'Select a Date') {this.placeholder = '';}">
                    </div>
                    <div class="col-12 col-md-4">
                        <span>Preferred Time of Contact*</span>
                        <select>
                            <option>Morning</option>
                            <option>Afternoon</option>
                            <option>Evening</option>
                        </select>
                    </div>
                    <div class="col-12 col-md-4">
                        <span>Contact Preference*</span>
                        <label for="phone">
                            <input type="checkbox" name="contact-pref" id="phone"> Phone
                        </label>
                        <label for="email">
                            <input type="checkbox" name="contact-pref" id="email"> Email
                        </label>
                    </div>
                    <div class="col-12 col-md-9">
                        <p>Rheem Applications Engineers will provide a detailed sizing &amp; product selection report. <strong>Please check your preferences below</strong> for additional information to be included in your sizing report.</p>
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-4">
                            <label for="spec-st">
                                <input type="checkbox" name="info-pref" id="spec-st"> Specification Street</label>
                        </div>
                        <div class="col-12 col-md-4">
                            <label for="parts-n-kits">
                                <input type="checkbox" name="info-pref" id="parts-n-kits"> Parts &amp; Kits List</label>
                        </div>
                        <div class="col-12 col-md-4">
                            <label for="piping">
                                <input type="checkbox" name="info-pref" id="piping"> Piping Diagram</label>
                        </div>
                        <div class="col-12 col-md-4">
                            <label for="prod-opt">
                                <input type="checkbox" name="info-pref" id="prod-opt"> Product Options</label>
                        </div>
                        <div class="col-12 col-md-4">
                            <label for="energy-save">
                                <input type="checkbox" name="info-pref" id="energy-save"> Energy Savings Information</label>
                        </div>
                        <div class="col-12 col-md-4">
                            <label for="revit">
                                <input type="checkbox" name="info-pref" id="revit"> Revit Files</label>
                        </div>
                        <div class="col-12"><button class="btn-primary disabled" type="submit" id="continue1">CONTINUE</button></div>
                    </div>
                </div>
            </form>

这是我的JS：

$(document).ready(function() {
$('form > input').keyup(function() {
    var empty = false;
    $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
    });
    if (empty) {
        $('#continue1').addClass("disabled")
    } else {
        $('#continue1').removeClass('disabled');
    }
});

}(;

Answer 1

你的选择器是错误的。 'form > input'选择输入标签，这些标签是表单标签的直接后代。您可能想要'form input'这意味着输入标签可以是表单标签内的任意数量的级别。

https://jsfiddle.net/0Lvmraz8/

作为提示，您应该真正使用console.log来检查您的变量是否与您认为的那样。在这种情况下，console.log($('form > input'));会向您显示没有元素。

Answer 2

你需要遍历所有输入(使用 js 或 jquery 作为最后的手段(，看看属性是否.value != ""(我建议嵌套if的(。如果所有输入都不为空，则它将重新启用该按钮。您还可以使其在任何时候input中的一个为空，它将禁用该按钮。使用 document.getElementById("thatid").onchange = myFunction(){ /*mycode*/} 调用验证函数

参见 jsfiddle： https://jsfiddle.net/seerypx4/