jquery Validator Fehlermeldung zweite der Form nicht zeigt

Question

ich mit dem jQuery-Plugin für die Validierung begonnen und bin verwirrt, warum es nicht funktioniert, hier ist mein Javascript-Code für sie: "

$("#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")); 
      } 
}); 

und Formularcode war

<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> 

Zunächst Form Validierung funktioniert gut nach DOB wird die Validierung nicht funktioniert, wenn das Formular ohne den Vornamen zu füllen, Mobile, E-Mail es die Fehlermeldung und die Validierung nicht zeigt auch nicht funktioniert.

Ich habe versucht, die Validierung von DOB zu verbergen und erneut die Validierung hinzuzufügen, es funktionierte gut, nachdem der DOB die Validierung nicht funktioniert. Wo ist falsch gelaufen?

Answer 1

Alles funktioniert gut, aber Sie müssen die Fehlermeldung Farben ändern, so dass Benutzer die Fehlermeldungen von Etiketten identifizieren können. Setzen Sie ein css wie:

.error{ 
    color: red; 
} 

Es wird der Fehlertext in roter Farbe angezeigt.

Working Fiddle

Answer 2

Dinge wird funktionieren, wenn Sie die folgenden Änderungen in Ihrem Plunker machen

1: Entfernen style = "overflow: hidden;" vom HTML-Tag.

2: Fügen Sie script.js in Ihren Plunker, sollten Sie Kopf-Tag so sein.

<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

Das Problem mit dem aktualisierten Code ist, dass mit Submit-Button können Sie auch diese Funktion auf Klick Bindung,

$(".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; 
    }); 

Dieser Code ausgelöst wird immer vor der Validierung auf Formular Einreichen und Verursachen der Validierung zu brechen.

sollten Sie den Code in eine private Funktion setzen und aufrufen, sobald die Validierung erfolgreich ist.

Privat Funktion

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; 

} 

und in der Validate-Methode unter Eigenschaft hinzufügen.

submitHandler: function(form) { 
      onValidationSuccessful(); 
     }