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