jQuery 验证不是在提交时触发？

Question

我运行遇到了 jQuery 验证插件 [ https://jqueryvalidation.org/ ] 没有触发我的表单提交的问题。

脚本在 Lint 中没有语法错误。 Google Chrome 开发者控制台没有报告任何问题。

但是表单只是提交而没有验证任何内容。

请参阅下面的代码片段。

$(document).ready(function () {
 $('input[name=DonationType]:radio').on('change', function () {
  if ($('#DonationTypeIndividual').is(':checked')) {
   $('#CompanyName').prop( 'disabled', true );
  }
  else
  {
   $('#CompanyName').prop( 'disabled', false );
  }
 });
 
 $('#InHonorOf').on('change', function () {
  if ($('#InHonorOf').is(':checked')) {
   $('#InHonorOfName').prop( 'disabled', false );
  }
  else {
   $('#InHonorOfName').prop( 'disabled', true );
  }
 });
 
 $('#InMemoryOf').on('change', function () {
  if ($('#InMemoryOf').is(':checked')) {
   $('#InMemoryOfName').prop( 'disabled', false );
  }
  else {
   $('#InMemoryOfName').prop( 'disabled', true );
  }
 });
 
 
 $('input[name=GiftNotificationMethod]:radio').on('change', function () {
  if ($('#GiftNotificationMethodNone').is(':checked')) {
   $('#GiftNotificationMessage').prop( 'disabled', true );
   $('#GiftNotificationName').prop( 'disabled', true );
   $('#GiftNotificationEmail').prop( 'disabled', true );
   $('#GiftNotificationStreet01').prop( 'disabled', true );
   $('#GiftNotificationStreet02').prop( 'disabled', true );
   $('#GiftNotificationCity').prop( 'disabled', true );
   $('#GiftNotificationState').prop( 'disabled', true );
   $('#GiftNotificationZIPCode').prop( 'disabled', true );
  }
  else if ($('#GiftNotificationMethodEmail').is(':checked')) {
   $('#GiftNotificationMessage').prop( 'disabled', false );
   $('#GiftNotificationName').prop( 'disabled', false );
   $('#GiftNotificationEmail').prop( 'disabled', false );
   $('#GiftNotificationStreet01').prop( 'disabled', true );
   $('#GiftNotificationStreet02').prop( 'disabled', true );
   $('#GiftNotificationCity').prop( 'disabled', true );
   $('#GiftNotificationState').prop( 'disabled', true );
   $('#GiftNotificationZIPCode').prop( 'disabled', true );
  }
  else if ($('#GiftNotificationMethodMail').is(':checked')) {
   $('#GiftNotificationMessage').prop( 'disabled', false );
   $('#GiftNotificationName').prop( 'disabled', false );
   $('#GiftNotificationEmail').prop( 'disabled', true );
   $('#GiftNotificationStreet01').prop( 'disabled', false );
   $('#GiftNotificationStreet02').prop( 'disabled', false );
   $('#GiftNotificationCity').prop( 'disabled', false );
   $('#GiftNotificationState').prop( 'disabled', false );
   $('#GiftNotificationZIPCode').prop( 'disabled', false );
  }
 });

 var registrationFormValidator = $('#DonationForm').validate({
  errorElement: 'div',
  rules: {
   DonationAmount: { required: true },
   FullName: { required: true },
   Street01: { required: true },
   City: { required: true },
   ZIPCode: { required: true, zipcodeUS: true },
   Email: { required: true, email: true },
   Phone: { phoneUS: true },
   Fax: { phoneUS: true },
   InHonorOfName: { required: true },
   InMemoryOfName: { required: true },
   GiftNotificationName: { required: true },
   GiftNotificationEmail: { required: true, email: true },
   GiftNotificationStreet01: { required: true },
   GiftNotificationCity: { required: true },
   GiftNotificationZIPCode: { required: true, zipcodeUS: true },
   CardNumber: { required: true },
   CardExpiration: { required: true },
   CardSecurityCode: { required: true, digits: true }
  },
  messages: {
   DonationAmount: { required: $('#DonationAmount').data('validationRequired') },
   FullName: { required: $('#FullName').data('validationRequired') },
   Street01: { required: $('#Street01').data('validationRequired') },
   City: { required: $('#City').data('validationRequired')},
   ZIPCode: { required: $('#ZIPCode').data('validationRequired'), zipcodeUS: $('#ZIPCode').data('validationFormat') },
   Email: { required: $('#Email').data('validationRequired'), email: $('#Email').data('validationFormat') },
   Phone: { phoneUS: $('#Phone').data('validationFormat') },
   Fax: { phoneUS: $('#Fax').data('validationFormat') },
   InHonorOfName: { required: $('#InHonorOfName').data('validationRequired') },
   InMemoryOfName: { required: $('#InMemoryOfName').data('validationRequired') },
   GiftNotificationName: { required: $('#GiftNotificationName').data('validationRequired') },
   GiftNotificationEmail: { required: $('#GiftNotificationEmail').data('validationRequired'), email: $('#GiftNotificationEmail').data('validationFormat') },
   GiftNotificationStreet01: { required: $('#GiftNotificationStreet01').data('validationRequired') },
   GiftNotificationCity: { required: $('#GiftNotificationCity').data('validationRequired')},
   GiftNotificationZIPCode: { required: $('#GiftNotificationZIPCode').data('validationRequired'), zipcodeUS: $('#GiftNotificationZIPCode').data('validationFormat') },
   CardNumber: { required: $('#CardNumber').data('validationRequired') },
   CardExpiration: { required: $('#CardExpiration').data('validationRequired') },
   CardSecurityCode: { required: $('#CardSecurityCode').data('validationRequired'), digits: $('#CardSecurityCode').data('validationFormat') }
  },
  errorPlacement: function (error, element) {
   $(error).insertAfter($(element));
  },
  highlight: function (element, errorClass) {
   $(element).parent('li').addClass('has-error');
  },
  unhighlight: function (element, errorClass, validClass) {
   $(element).parent('li').removeClass('has-error');
  },
  onfocusout: false,
  invalidHandler: function (event, validator) {
   setTimeout(function () {
    $('input:text').blur();
    $('textarea').blur();
   }, 10);
  }
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.min.js"></script>



<form method="post" id="DonationForm" action="/">
    <div class="form-group">
     <label for="DonationAmount" class="sr-only">Donation amount</label>
     <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="number" class="form-control" id="DonationAmount" placeholder="Donation amount" data-validation-required="Please enter a valid donation amount.">
      <div class="input-group-addon">.00</div>
     </div>
      </div>
    <hr>
    
    <div class="form-group">
     <label for="FullName" class="sr-only">Your first and last name</label>
     <div id="FullName">
      <input type="text" class="form-control" id="FirstName" placeholder="First name" data-validation-required="Please enter your first name.">
      <input type="text" class="form-control" id="LastName" placeholder="Last name" data-validation-required="Please enter your last name.">
     </div>
      </div>
    <div class="form-group">
     <label for="DonationType" class="sr-only">Donation Type</label>
     <input type="radio" name="DonationType" id="DonationTypeIndividual" value="0" checked=""> Individual Donation<br>
       <input type="radio" name="DonationType" id="DonationTypeCorporate" value="1"> Corporate Donation<br>
    </div>
    <div class="form-group">
     <label for="CompanyName" class="sr-only">Company name</label>
     <input disabled="" type="text" class="form-control" id="CompanyName" placeholder="Company name">
    </div>
    <div class="alert alert-warning" role="alert">
     Please ensure that the address entered below matches the billing address for your credit card.
    </div>
    <div class="form-group">
     <label for="Street01" class="sr-only">Street</label>
     <input type="text" class="form-control" id="Street01" placeholder="Street address" data-validation-required="Please enter your street address.">
     <input type="text" class="form-control" id="Street02" placeholder="">
    </div>
    <div class="form-group">
     <label for="City" class="sr-only">City</label>
     <input type="text" class="form-control" id="City" placeholder="City" data-validation-required="Please enter your city.">
    </div>
    <div class="form-group">
     <label for="State" class="sr-only">State/Territory</label>
     <select id="State" class="form-control">
      <option>State/territory</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AS">American Samoa</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="DC">District Of Columbia</option>
      <option value="FM">Federated States Of Micronesia</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="GU">Guam</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="ME">Maine</option>
      <option value="MH">Marshall Islands</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NV">Nevada</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NM">New Mexico</option>
      <option value="NY">New York</option>
      <option value="NC">North Carolina</option>
      <option value="ND">North Dakota</option>
      <option value="MP">Northern Mariana Islands</option>
      <option value="OH">Ohio</option>
      <option value="OK">Oklahoma</option>
      <option value="OR">Oregon</option>
      <option value="PW">Palau</option>
      <option value="PA">Pennsylvania</option>
      <option value="PR">Puerto Rico</option>
      <option value="RI">Rhode Island</option>
      <option value="SC">South Carolina</option>
      <option value="SD">South Dakota</option>
      <option value="TN">Tennessee</option>
      <option value="TX">Texas</option>
      <option value="UT">Utah</option>
      <option value="VT">Vermont</option>
      <option value="VI">Virgin Islands</option>
      <option value="VA">Virgina</option>
      <option value="WA">Washington</option>
      <option value="WV">West Virginia</option>
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
     </select>
    </div>
    <div class="form-group">
     <label for="ZIPCode" class="sr-only">ZIP Code</label>
     <input type="text" class="form-control" id="ZIPCode" placeholder="ZIP Code" data-validation-required="Please enter your ZIP code." data-validation-format="Please enter a valid ZIP code.">
    </div>
    <div class="form-group">
     <label for="Email" class="sr-only">Email</label>
     <input type="email" class="form-control" id="Email" placeholder="Email address" data-validation-required="Please enter your email address.">
    </div>
    <div class="form-group">
     <label for="Phone" class="sr-only">Phone</label>
     <input type="tel" class="form-control" id="Phone" placeholder="Phone" data-validation-format="Please enter a valid phone number.">
    </div>
    <div class="form-group">
     <label for="Fax" class="sr-only">Fax</label>
     <input type="tel" class="form-control" id="Fax" placeholder="Fax" data-validation-format="Please enter a valid fax number.">
    </div>
    <hr>
    
    <div class="form-group">
     <input type="checkbox" id="InHonorOf">
     <label for="InHonorOfName">In honor of</label>
     <input disabled="" type="text" class="form-control" id="InHonorOfName" placeholder="In honor of..." data-validation-required="Please enter the name of the individual that you are giving this gift in honor of.">
    </div> 
    <div class="form-group">
     <input type="checkbox" id="InMemoryOf">
     <label for="InMemoryOfName">In memory of</label>
     <input disabled="" type="text" class="form-control" id="InMemoryOfName" placeholder="In memory of" data-validation-required="Please enter the name of the individual that you are giving this gift in memory of.">
    </div>
    <div class="form-group">
     <label for="GiftNotification" class="sr-only">Gift Notification</label>
     <input type="radio" name="GiftNotificationMethod" id="GiftNotificationMethodNone" value="0" checked=""> None<br>
       <input type="radio" name="GiftNotificationMethod" id="GiftNotificationMethodEmail" value="1"> By Email<br>
     <input type="radio" name="GiftNotificationMethod" id="GiftNotificationMethodMail" value="2"> By Mail<br>
    </div>    
    <div class="form-group">
     <label for="GiftNotificationMessage" class="sr-only">Message</label>
     <textarea disabled="" class="form-control" id="GiftNotificationMessage" placeholder="Your message..." rows="4"></textarea>
      </div> 
    <div class="form-group">
     <label for="GiftNotificationName" class="sr-only">Recipient's Name</label>
     <input disabled="" type="text" class="form-control" id="GiftNotificationName" placeholder="City" data-validation-required="Please enter your gift notification recipient's name.">
    </div>
    <div class="form-group">
     <label for="GiftNotificationEmail" class="sr-only">Recipient's Email</label>
     <input disabled="" type="email" class="form-control" id="GiftNotificationEmail" placeholder="Recipient's email address" data-validation-required="Please enter your gift notification recipient's email address." data-validation-format="Please enter a valid email address.">
    </div>
    <div class="form-group">
     <label for="GiftNotificationStreet01" class="sr-only">Street</label>
     <input disabled="" type="text" class="form-control" id="GiftNotificationStreet01" placeholder="Recipient's street address" data-validation-required="Please enter a street address for the gift notification.">
     <input disabled="" type="text" class="form-control" id="GiftNotificationStreet02" placeholder="">
    </div>
    <div class="form-group">
     <label for="GiftNotificationCity" class="sr-only">City</label>
     <input disabled="" type="text" class="form-control" id="GiftNotificationCity" placeholder="Recipient's City" data-validation-required="Please enter a city for the gift notification.">
    </div>
    <div class="form-group">
     <label for="GiftNotificationState" class="sr-only">State/Territory</label>
     <select disabled="" id="GiftNotificationState" class="form-control">
      <option>Recipient's state/territory</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AS">American Samoa</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="DC">District Of Columbia</option>
      <option value="FM">Federated States Of Micronesia</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="GU">Guam</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="ME">Maine</option>
      <option value="MH">Marshall Islands</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NV">Nevada</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NM">New Mexico</option>
      <option value="NY">New York</option>
      <option value="NC">North Carolina</option>
      <option value="ND">North Dakota</option>
      <option value="MP">Northern Mariana Islands</option>
      <option value="OH">Ohio</option>
      <option value="OK">Oklahoma</option>
      <option value="OR">Oregon</option>
      <option value="PW">Palau</option>
      <option value="PA">Pennsylvania</option>
      <option value="PR">Puerto Rico</option>
      <option value="RI">Rhode Island</option>
      <option value="SC">South Carolina</option>
      <option value="SD">South Dakota</option>
      <option value="TN">Tennessee</option>
      <option value="TX">Texas</option>
      <option value="UT">Utah</option>
      <option value="VT">Vermont</option>
      <option value="VI">Virgin Islands</option>
      <option value="VA">Virgina</option>
      <option value="WA">Washington</option>
      <option value="WV">West Virginia</option>
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
     </select>
    </div>
    <div class="form-group">
     <label for="GiftNotificationZIPCode" class="sr-only">ZIP code</label>
     <input disabled="" type="text" class="form-control" id="GiftNotificationZIPCode" placeholder="Recipient's ZIP code" data-validation-required="Please enter a ZIP code for the gift notification." data-validation-format="Please enter a valid ZIP code.">
    </div>
    <hr>
    
    <div class="form-group">
     <label for="CardNumber" class="sr-only">Card number</label>
     <input type="number" class="form-control" id="CardNumber" placeholder="Card number" data-validation-required="Please enter a valid credit card number." maxlength="16">
     <span>Numbers only, no spaces or dashes</span>
      </div>
    <div class="form-group">
     <label for="CardExpirationDate" class="sr-only">Card expiration date</label>
     <input type="text" class="form-control" id="CardExpirationDate" placeholder="Card expiration date" data-validation-required="Please enter your credit card's expiration date (MM/YY)." maxlength="5">
     <span>MM/YY</span>
      </div>
    <div class="form-group">
     <label for="CardSecurityCode" class="sr-only">Card security code</label>
     <input type="text" class="form-control" id="CardSecurityCode" placeholder="Card security code" data-validation-required="Please enter your credit card's security code." data-validation-format="Please enter a valid credit card security code." maxlength="4">
     <span><a href="javascript:var securityCodeWindow = window.open('https://account.authorize.net/help/Miscellaneous/Pop-up_Terms/Virtual_Terminal/Card_Code.htm', 'securityCode', 'width=480, height=480')">What's this?</a></span>
      </div>
    <div class="form-group">
    </div>
    <button type="submit" id="DonationFormSubmit" class="btn btn-primary">Send donation</button> 
   </form>

Answer 1

None 个输入元素具有 name 属性。考虑验证的每个元素必须包含唯一的 name.

rules: {
    DonationAmount: { // <- NAME attribute
        required: true 
    },
    FullName: {       // <- NAME attribute
        required: true 
    } ....

jQuery 验证不是在提交时触发？

jQuery Validate not firing on submit?

javascript

jquery

jquery-validate