在表单

时间:2018-01-31 20:51:10

标签: jquery html forms

我有一张表格。在启用按钮之前,我需要所有必填字段都有一个值。目前,我在继续按钮上有一个按钮类,禁用它。我不希望使用必需属性或将其设为输入字段而不是按钮。这是一个大型项目的表单,我必须使用此按钮。无论如何,当所有必填字段都有一些值时,我希望按钮删除已禁用的类。在我的项目中,它不一定是具体的值。现在我只是检查以确保它不是空的。我的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');
    }
});

});

2 个答案:

答案 0 :(得分:1)

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

https://jsfiddle.net/0Lvmraz8/

作为提示,您应该使用console.log来检查您的变量是否符合您的想法。在这种情况下,console.log($('form > input'));会向您显示没有元素。

答案 1 :(得分:0)

你需要遍历所有输入(使用js或jquery作为最后的手段)并查看属性 INFO | XNIO version 3.3.4.Final INFO | XNIO NIO Implementation Version 3.3.4.Final INFO | JBoss Remoting version 4.0.18.Final javax.naming.AuthenticationException: Failed to connect to any server. Servers tried: [http-remoting://192.168.1.115:10090 (Authentication failed: all available authentication mechanisms failed: JBOSS-LOCAL-USER: javax.security.sasl.SaslException: Failed to read server challenge [Caused by java.io.FileNotFoundException: \docs\root\batch-etl\standalone\tmp\auth\local4222485653487147171.challenge (The system cannot find the path specified)] DIGEST-MD5: javax.security.sasl.SaslException: DIGEST-MD5: Cannot perform callback to acquire realm, authentication ID or password [Caused by javax.security.auth.callback.UnsupportedCallbackException])] [Root exception is javax.security.sasl.SaslException: Authentication failed: all available authentication mechanisms failed: JBOSS-LOCAL-USER: javax.security.sasl.SaslException: Failed to read server challenge [Caused by java.io.FileNotFoundException: \docs\root\batch-etl\standalone\tmp\auth\local4222485653487147171.challenge (The system cannot find the path specified)] DIGEST-MD5: javax.security.sasl.SaslException: DIGEST-MD5: Cannot perform callback to acquire realm, authentication ID or password [Caused by javax.security.auth.callback.UnsupportedCallbackException]] at org.jboss.naming.remote.client.HaRemoteNamingStore.failOverSequence(HaRemoteNamingStore.java:238) at org.jboss.naming.remote.client.HaRemoteNamingStore.namingStore(HaRemoteNamingStore.java:149) at org.jboss.naming.remote.client.HaRemoteNamingStore.namingOperation(HaRemoteNamingStore.java:130) at org.jboss.naming.remote.client.HaRemoteNamingStore.lookup(HaRemoteNamingStore.java:272) at org.jboss.naming.remote.client.RemoteContext.lookupInternal(RemoteContext.java:104) at org.jboss.naming.remote.client.RemoteContext.lookup(RemoteContext.java:93) at org.jboss.naming.remote.client.RemoteContext.lookup(RemoteContext.java:146) at javax.naming.InitialContext.lookup(InitialContext.java:417) (我建议嵌套.value != ""&#39; s)。如果所有输入都不为空,则它将重新启用该按钮。您也可以这样做,以便在任何时候if}中的一个为空,它将禁用该按钮。使用input

调用您的验证函数

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