我开始使用jquery插件进行验证，我很困惑为什么它不起作用，这是我的javascript代码：＆＃34;
$("#msform").validate({
rules: {
set3: {
required: true,
number: true,
range: [15000,1000000]
},
companyName: {
required: true
},
set6: {
required: true
},
existingEmi: {
number: true
},
dobDay: {
required: true
},
dobMonth: {
required: true
},
dobYear: {
required: true
},
cityTextBox: {
required: true
},
set11: {
required: true,
number: true,
range: [2000000,250000000]
},
annualNetProfit: {
required: true,
number: true,
range: [300000,5000000]
},
name: {
required: true
},
mobile: {
required: true,
range: [7000000000, 9999999999]
},
email: {
required: true,
email: true
},
termsAndCondition: {
required: true
}
},
messages: {
set3: {
required: "Please provide your monthly income",
number: "Income cannot be characters"
},
companyName: {
required: "Please enter your company name."
},
set6: {
required: "Please select your mode of salary."
},
existingEmi: {
number: "EMI cannot be characters"
},
dobDay: {
required: "Please select your birth day."
},
dobMonth: {
required: "Please select your birth month."
},
dobYear: {
required: "Please select your birth year."
},
cityTextBox: {
required: "Please enter your city."
},
set11: {
required: "Please enter your annual turnover.",
number: "Annual turnover cannot be characters"
},
annualNetProfit: {
required: "Please enter your annual net profit.",
number: "Annual net profit cannot be characters"
},
name: {
required: "Please enter your first name."
},
mobile: {
required: "Please enter your mobile number.",
range: "Please enter a valid mobile number."
},
email: {
required: "Please enter your email address.",
email: "Please enter a valid email address."
},
termsAndCondition: {
required: "Please accept the terms and condition to submit the form. ",
}
},
errorPlacement:
function(error, element){
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
}
});
表单代码是
<form name="offer" action="" method="post" id="msform">
<!-- Type of occupation -->
<fieldset id="prof_type">
<h2 class="fs-title">I am</h2>
<input type="hidden" name="offeringTypeId" value="47" id="offeringTypeId_10">
<input type="hidden" value="3" name="product"/>
<input type="hidden" value="6,2135,1,9,10,23,21,14,69,15,8,3,44,56,20,2127,2,660,57,53,54,51,52,62,61,58,55,64,65,63,59,41,60,1765,1254,48,1292,1767,2015,1763,1762,1766,1768,1797,1798,1799,1808,1809,1810,1832,527,2188,2155" id="allPrincipalIds" name="allPrincipalIds"/>
<input type="hidden" value="Y" name="apnaExchangePolicy"/>
<input type="hidden" value="Y" name="isNewWebsite"/>
<input type="hidden" name = "monthlyIncome" id="monthlyIncome" value="" />
<input type="hidden" name="annualIncome" value="" />
<input type="hidden" name="AdGroupId" id="AdGroupId" value="<?php echo $_COOKIE['AdGroupId'];?>" />
<input type="hidden" name="ef_id" id="ef_id" value="<?php echo $_COOKIE['ef_id'];?>" />
<div id="occupation">
<input type="radio" name="occupation" title="Salaried" value="1" />
<input type="radio" name="occupation" title="Self-employed Professional" value="11" />
<input type="radio" name="occupation" title="Self-employed Business" value="2" />
</div>
<br />
<!-- <input class="next action-button" name="next" type="button" value="Next"> -->
</fieldset>
<!-- Company Name -->
<fieldset id="work">
<h2 class="fs-title">I work for</h2>
<div class="tooltip tooltip-west">
<span class="tooltip-item">?</span>
<span class="tooltip-content">Enter the name of the Company for which you work, there may be special offers available.</span>
</div>
<input type="text" name="companyName" id="company" value="" placeholder="Enter your company name" class="typeahead" style="font-size:18px;border-radius:0;width:50%;" />
<div id="companyName_validate"></div>
<a class="previous">
<div class="scroll-btn-prev"></div>
</a>
<!--<input class="previous action-button" name="previous" type="button" value="Previous" />-->
<input class="next action-button" name="next" type="button" value="Next" />
</fieldset>
<!-- Monthly Salary -->
<fieldset id="sal">
<h2 class="fs-title">My net monthly take home salary is</h2>
<div class="tooltip tooltip-west">
<span class="tooltip-item">?</span>
<span class="tooltip-content" style="width: 30em;">Enter the monthly net take home salary (after deducting PF, Income tax, incentives and any other deductions)</span>
</div>
<input name="set3" type="text" id="set3" placeholder="Your Monthly Income" />
<div id="set3_validate"></div>
<a class="previous">
<div class="scroll-btn-prev"></div>
</a>
<!--
<input class="previous action-button" name="previous" type="button" value="Previous" />-->
<input class="next action-button" name="next" type="button" value="Next" />
</fieldset>
<!-- Annual Turnover (If Self Employed) -->
<fieldset id="tur">
<h2 class="fs-title">My annual turnover is</h2>
<div class="tooltip tooltip-west">
<span class="tooltip-item">?</span>
<span class="tooltip-content" style="width: 18em;">Enter Gross turnover for the last financial year as per the filed ITR.</span>
</div>
<input name="set11" type="text" id="set11" placeholder="Your Annual Turnover" />
<div id="set11_validate"></div>
<a class="previous">
<div class="scroll-btn-prev"></div>
</a>
<!--
<input class="previous action-button" name="previous" type="button" value="Previous" />-->
<input class="next action-button" name="next" type="button" value="Next" />
</fieldset>
<!-- Place -->
<fieldset>
<h2 class="fs-title">I am currently residing in</h2>
<div class="tooltip tooltip-west">
<span class="tooltip-item">?</span>
<span class="tooltip-content">City of residence is required because Loan Eligibility norms often vary from city to city.</span>
</div>
<input type="input" value="0" name="city" id="city" class="required" style="display:none;"/>
<div id="cityTextBox">
<input type="radio" name="cityTextBox" title="Mumbai" value="57" />
<input type="radio" name="cityTextBox" title="New Delhi" value="63" />
<input type="radio" name="cityTextBox" title="Bangalore" value="9" />
<input type="radio" name="cityTextBox" title="Chennai" value="20" />
<div id="set10">
<select id="set10" name="set10">
<option value="">Other City</option>
<option value="1">Ahmedabad</option>
<option value="2">Akola</option>
<option value="3">Allahabad</option>
<option value="4">Alwar</option>
<option value="5">Amritsar</option>
<option value="6">Anand</option>
<option value="7">Ankleshwar</option>
<option value="8">Aurangabad</option>
<option value="10">Bareilly</option>
</select>
</div>
<input id="city_but" class="next" name="next" type="button" value="Next" />
</div>
<div id="set10_validate"></div>
<a class="previous">
<div class="scroll-btn-prev"></div>
</a>
<!--
<input class="previous action-button" name="previous" type="button" value="Previous" />
<input class="next action-button" name="next" type="button" value="Next" />-->
</fieldset>
<!-- Payment Method -->
<fieldset id="sal_acct">
<h2 class="fs-title">My salary account is with</h2>
<div class="tooltip tooltip-west">
<span class="tooltip-item">?</span>
<span class="tooltip-content" style="width: 20em;">Please select how you receive your salary.</span>
</div>
<input type="hidden" name="salaryReceivedAs" id="sal_method" value="" />
<input type="hidden" name="salaryAccountWithBank" id="sal_bank" value="" />
<div id="bank">
<input type="radio" name="bank" title="SBI" value="6" />
<input type="radio" name="bank" title="HDFC Bank" value="12" />
<input type="radio" name="bank" title="ICICI Bank" value="1" />
<input type="radio" name="bank" title="Axis Bank (UTI)" value="10" />
<div id="set6">
<select id="set6" name="set6">
<option value="">Other Bank</option>
<option value="2">IDBI Bank</option>
<option value="3">CITI Bank</option>
<option value="4">CITI Financial</option>
<option value="5">IDBI Home Finance Ltd</option>
<option value="7">RBS</option>
<option value="8">HSBC Bank</option>
<option value="9">HDFC Ltd.</option>
</select>
</div>
<input type="radio" name="bank" title="Receive by cash" value="100" />
<input type="radio" name="bank" title="Receive by cheque" value="101" />
<input id="bank_but" class="next" name="next" type="button" value="Next" />
</div>
<div id="set6_validate"></div>
<a class="previous">
<div class="scroll-btn-prev"></div>
</a>
<!--
<input class="previous action-button" name="previous" type="button" value="Previous" />-->
</fieldset>
<!-- Existing credit card details if any -->
<fieldset id="ecredit">
<h2 class="fs-title">My Existing Credit limit is</h2>
<div class="tooltip tooltip-west">
<span class="tooltip-item">?</span>
<span class="tooltip-content">Please enter the limit of existing credit card if any.</span>
</div>
<input name="creditLimitAmt" class="Optional" type="text" id="set7" placeholder="Credit Card limit" style="" />
<!--<label for="existingCre">Credit Card limit</label>-->
<div id="existingCre_validate"></div>
<a class="previous">
<div class="scroll-btn-prev"></div>
</a>
<input name="existCRE" id="existCRE" type="hidden" />
<input name="tenure" id="tenure" type="hidden" value="2" />
<!--<input class="previous action-button" name="previous" type="button" value="Previous" />-->
<input class="next action-button" id="emi_but" name="next" type="button" value="Next" />
</fieldset>
<!-- Date of Birth -->
<fieldset>
<h2 class="fs-title">My date of birth is</h2>
<div class="tooltip tooltip-west">
<span class="tooltip-item">?</span>
<span class="tooltip-content" style="width: 27em;">Enter the date of birth as mentioned on the PAN card. Accurate age helps us to compute the best loan offer.</span>
</div>
<select class="widthDay" id="dobDay" name="dobDay">
<option value="">Date</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select class="widthMonth" id="dobMonth" name="dobMonth">
<option value="">Month</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select class="widthYear" id="dobYear" name="dobYear">
<option value="">Year</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
</select>
<br>
<div id="dobDay_validate"></div>
<div id="dobMonth_validate"></div>
<div id="dobYear_validate"></div>
<input type="hidden" name="age" id="age" />
<input type="hidden" name="offeringTypeId" value="42">
<input type="hidden" name="purpose" value="" id="hiddenPurpose">
<input type="hidden" name="occupationId" value="1">
<input type="hidden" name="jTag" value="comp">
<a class="previous">
<div class="scroll-btn-prev"></div>
</a>
<!--
<input class="previous action-button" name="previous" type="button" value="Previous" />-->
<input class="next action-button" id="dob_but" name="next" type="button" value="Next" />
</fieldset>
<!-- Personal Details -->
<fieldset id="personal">
<h2 class="fs-title">Personal Details</h2>
<div class="tooltip tooltip-west" style="top: 32%;left: 78%;">
<span class="tooltip-item">?</span>
<span class="tooltip-content" style="width: 8em;">Enter full name as it appears on your PAN card.</span>
</div>
<div class="tooltip tooltip-west" style="top: 47%;left: 78%;">
<span class="tooltip-item">?</span>
<span class="tooltip-content" style="width: 10em;">Please give correct mobile number as a code will be sent to validate your number.</span>
</div>
<div class="tooltip tooltip-west" style="top: 63%;left: 78%;">
<span class="tooltip-item">?</span>
<span class="tooltip-content" style="width: 10em;">On this address, We will mail you offer details, Documents needed and useful tips on negotiating a good deal.</span>
</div>
<div id="gender">
<input type="radio" name="gender" title="Mr." value="male" />
<input type="radio" name="gender" title="Mrs." value="female" />
<input type="radio" name="gender" title="Miss" value="female" />
</div>
<input type="hidden" value="Both" name="rateType" />
<input name="name" type="text" placeholder="First Name" />
<input name="lname" type="text" placeholder="Last Name" /><br>
<div id="name_validate"></div>
<input name="mobile" type="text" placeholder="Phone" maxlength="10" /><br>
<div id="mobile_validate"></div>
<input name="email" type="text" placeholder="Email" /><br>
<div id="email_validate"></div>
<input class="action-button open-cc" type="submit" value="Submit" />
</fieldset>
</form>
首先，表单验证在DOB之后工作正常但是在提交表单时没有填写第一个名称，移动电子邮件，电子邮件没有显示错误消息，验证也无效。
我试图隐藏DOB的验证并再次添加验证它在DOB验证不起作用后工作正常。错在哪里。
答案 0 :(得分：0)
答案 1 :(得分：0)
如果您在plunker中进行以下更改，事情将会正常工作
1：删除样式=＆＃34;溢出：隐藏;＆＃34;来自html标签。
2：将script.js添加到你的plunker中，你的head标签应该是这样的。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script src="script.js"></script>
</head>
https://plnkr.co/edit/9hixFbI2viXitWbOsC55?p=preview
更新代码的问题在于，使用提交按钮也是如此 在点击时绑定此功能，
$(".open-cc").click(function(){
var tat = $('input[name|="set11"]').val();
$('input[name|="annualIncome"]').val(tat);
$('input[name|="monthlyIncome"]').val(parseInt(tat/12));
$.ajax({
type: "POST",
url: "https://ppp.apna.com/simple-search-result.html",
data: $('#msform').serialize(),
success: function(responseText){
if(responseText){
url_redirect({url: "http://ppp.apna.com/mobile-validation.html"});
url_redirect({url: "http://ppp.apna.com/mobile-validation.html"});
}
}
});
return false;
});
此代码在表单提交验证之前被触发，导致验证中断。
您应该将代码放在私有函数中，并在验证成功后调用它。
私人功能
var onValidationSuccessful = function()
{
var tat = $('input[name|="set11"]').val();
$('input[name|="annualIncome"]').val(tat);
$('input[name|="monthlyIncome"]').val(parseInt(tat/12));
$.ajax({
type: "POST",
url: "https://ppp.apna.com/simple-search-result.html",
data: $('#msform').serialize(),
success: function(responseText){
if(responseText){
url_redirect({url: "http://ppp.apna.com/mobile-validation.html"});
url_redirect({url: "http://ppp.apna.com/mobile-validation.html"});
}
}
});
return false;
}
并在validate方法中添加以下属性。
submitHandler: function(form) {
onValidationSuccessful();
}