我有一个多步骤JavaScript表单,当您单击第一个按钮以继续执行表单的第二步时,该表单会自动显示第二步中所有字段的验证错误消息。我想要验证错误消息,但我只希望它们在用户尝试提交表单时触发,而不填写必填字段。请在此处查看表单代码:
<div class="pricing-table sc-lead-form-homepage">
<div class="col-md-12">
<div class="plan most-popular">
<div class="plan-ribbon-wrapper">
<div class="plan-ribbon">100% Free</div>
</div>
<h3 class="text-center"><strong>Quick & Easy Quote</strong></h3>
<form class="registration-form" id="leadForm" onsubmit="return validateLeadForm() && trackSubmit()">
<fieldset>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<span class="leadSubTitle"><label><h4 class="get-started-form">Choose Your Bond:</h4></label></span>
<select class="form-control" id="leadBondRequest">
<option value="" disabled selected>Select the bond type</option>
<optgroup label="License & Permit / Misc. Bonds">
<option value="2">Auto Dealer Bond</option>
<option value="2">Contractor License Bond</option>
<option value="2">Freight Broker BMC-84 Bond</option>
<option value="2">Other License / Misc. Bond</option>
</optgroup>
<optgroup label="Construction & Service Contracts (non-license)">
<option value="1">Bid Bond</option>
<option value="1">Performance Bond</option>
<option value="1">Service Contract</option>
<option value="1">Other Construction (non-license)</option>
</optgroup>
</select>
<span id="leadBondRequestMsg" class="leadErrMsg"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<span class="leadSubTitle"><label><h4 class="get-started-form">Bond Amount:</h4></label></span>
<input type="text" id="leadBondAmount" class="form-control" placeholder="Enter your bond amount" onkeypress='return isNumberKey(event,"leadBondAmountMsg");' onBlur="validateEle(this)" onfocus="focusEle(this)"/>
<span id="leadBondAmountMsg" class="leadErrMsg"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<span class="leadSubTitle"><label><h4 class="get-started-form">Email to Send Your Quote:</h4></label></span>
<input type="text" id="leadEmail" class="form-control" placeholder="We'll never share your information!" onBlur="validateEle(this)"/>
<span id="leadEmailMsg" class="leadErrMsg"></span>
</div>
<div class="text-center">
<button class="sc-lead-form-btn btn-next">Get Your Free Quote!</button>
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<span class="leadSubTitle"><label><h4 class="get-started-form">First Name:</h4></label></span>
<input type="text" id="leadFName" class="form-control" placeholder="Your first name" onBlur="validateEle(this)"/>
<span id="leadFNameMsg" class="leadErrMsg"/>
</div>
<div class="col-md-6">
<span class="leadSubTitle"><label><h4 class="get-started-form">Last Name:</h4></label></span>
<input type="text" id="leadLName" class="form-control" placeholder="Your last name" onBlur="validateEle(this)"/>
<span id="leadLNameMsg" class="leadErrMsg"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<span class="leadSubTitle"><label><h4 class="get-started-form">Company Name:</h4></label></span>
<input type="text" id="leadCompany" class="form-control" placeholder="Your company name" onBlur="validateEle(this)"/>
<span id="leadCompanyMsg" class="leadErrMsg"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<span class="leadSubTitle"><label><h4 class="get-started-form">Phone Number:</h4></label></span>
<input type="text" id="leadPhone" class="form-control" placeholder="(___) ___-____" onkeypress='return isNumberKey(event,"leadPhoneMsg");' onBlur="validateEle(this)" onfocus="focusEle(this)"/>
<span id="leadPhoneMsg" class="leadErrMsg"/>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" id="sclead" class="sc-lead-form-btn" style="margin-bottom: 10px; margin-top: -5px;">Send Your Quote Now!</button>
</div>
</fieldset>
<div class="row">
<div class="col-md-12">
<img class="pull-right" style="margin-top: 5px;" src="/img/powered-by-sc.png">
<p class="leadText">Are you an insurance agent? If so <a onclick="scLead('registerSubBroker=true')">register your agency</a>.</p>
</div>
</div>
</form>
</div>
</div>
此外,here's a link到执行验证的js文件(我不会复制/粘贴代码,因为它太长了)。
有没有人知道为什么会发生这种情况以及如何确保在您继续执行表单的第二步时默认情况下不会显示错误消息?
提前致谢!