2016-05-25 9 views
1

jQueryの検証プラグイン[https://jqueryvalidation.org/]がフォーム送信時に発砲しないという問題が発生しています。jQuery Validateは送信時に起動しませんか?

スクリプトは、Lintの構文エラーなしでチェックアウトします。 Google Chromeデベロッパーコンソールに問題が報告されていません。

しかし、フォームは何も検証せずに送信します。

下記の私のコードスニペットを参照してください。入力要素の

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

 
\t var registrationFormValidator = $('#DonationForm').validate({ 
 
\t \t errorElement: 'div', 
 
\t \t rules: { 
 
\t \t \t DonationAmount: { required: true }, 
 
\t \t \t FullName: { required: true }, 
 
\t \t \t Street01: { required: true }, 
 
\t \t \t City: { required: true }, 
 
\t \t \t ZIPCode: { required: true, zipcodeUS: true }, 
 
\t \t \t Email: { required: true, email: true }, 
 
\t \t \t Phone: { phoneUS: true }, 
 
\t \t \t Fax: { phoneUS: true }, 
 
\t \t \t InHonorOfName: { required: true }, 
 
\t \t \t InMemoryOfName: { required: true }, 
 
\t \t \t GiftNotificationName: { required: true }, 
 
\t \t \t GiftNotificationEmail: { required: true, email: true }, 
 
\t \t \t GiftNotificationStreet01: { required: true }, 
 
\t \t \t GiftNotificationCity: { required: true }, 
 
\t \t \t GiftNotificationZIPCode: { required: true, zipcodeUS: true }, 
 
\t \t \t CardNumber: { required: true }, 
 
\t \t \t CardExpiration: { required: true }, 
 
\t \t \t CardSecurityCode: { required: true, digits: true } 
 
\t \t }, 
 
\t \t messages: { 
 
\t \t \t DonationAmount: { required: $('#DonationAmount').data('validationRequired') }, 
 
\t \t \t FullName: { required: $('#FullName').data('validationRequired') }, 
 
\t \t \t Street01: { required: $('#Street01').data('validationRequired') }, 
 
\t \t \t City: { required: $('#City').data('validationRequired')}, 
 
\t \t \t ZIPCode: { required: $('#ZIPCode').data('validationRequired'), zipcodeUS: $('#ZIPCode').data('validationFormat') }, 
 
\t \t \t Email: { required: $('#Email').data('validationRequired'), email: $('#Email').data('validationFormat') }, 
 
\t \t \t Phone: { phoneUS: $('#Phone').data('validationFormat') }, 
 
\t \t \t Fax: { phoneUS: $('#Fax').data('validationFormat') }, 
 
\t \t \t InHonorOfName: { required: $('#InHonorOfName').data('validationRequired') }, 
 
\t \t \t InMemoryOfName: { required: $('#InMemoryOfName').data('validationRequired') }, 
 
\t \t \t GiftNotificationName: { required: $('#GiftNotificationName').data('validationRequired') }, 
 
\t \t \t GiftNotificationEmail: { required: $('#GiftNotificationEmail').data('validationRequired'), email: $('#GiftNotificationEmail').data('validationFormat') }, 
 
\t \t \t GiftNotificationStreet01: { required: $('#GiftNotificationStreet01').data('validationRequired') }, 
 
\t \t \t GiftNotificationCity: { required: $('#GiftNotificationCity').data('validationRequired')}, 
 
\t \t \t GiftNotificationZIPCode: { required: $('#GiftNotificationZIPCode').data('validationRequired'), zipcodeUS: $('#GiftNotificationZIPCode').data('validationFormat') }, 
 
\t \t \t CardNumber: { required: $('#CardNumber').data('validationRequired') }, 
 
\t \t \t CardExpiration: { required: $('#CardExpiration').data('validationRequired') }, 
 
\t \t \t CardSecurityCode: { required: $('#CardSecurityCode').data('validationRequired'), digits: $('#CardSecurityCode').data('validationFormat') } 
 
\t \t }, 
 
\t \t errorPlacement: function (error, element) { 
 
\t \t \t $(error).insertAfter($(element)); 
 
\t \t }, 
 
\t \t highlight: function (element, errorClass) { 
 
\t \t \t $(element).parent('li').addClass('has-error'); 
 
\t \t }, 
 
\t \t unhighlight: function (element, errorClass, validClass) { 
 
\t \t \t $(element).parent('li').removeClass('has-error'); 
 
\t \t }, 
 
\t \t onfocusout: false, 
 
\t \t invalidHandler: function (event, validator) { 
 
\t \t \t setTimeout(function() { 
 
\t \t \t \t $('input:text').blur(); 
 
\t \t \t \t $('textarea').blur(); 
 
\t \t \t }, 10); 
 
\t \t } 
 
\t }); 
 
});
<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="/"> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="DonationAmount" class="sr-only">Donation amount</label> 
 
\t \t \t \t \t <div class="input-group"> 
 
\t \t \t \t \t \t <div class="input-group-addon">$</div> 
 
\t \t \t \t \t \t <input type="number" class="form-control" id="DonationAmount" placeholder="Donation amount" data-validation-required="Please enter a valid donation amount."> 
 
\t \t \t \t \t \t <div class="input-group-addon">.00</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <hr> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="FullName" class="sr-only">Your first and last name</label> 
 
\t \t \t \t \t <div id="FullName"> 
 
\t \t \t \t \t \t <input type="text" class="form-control" id="FirstName" placeholder="First name" data-validation-required="Please enter your first name."> 
 
\t \t \t \t \t \t <input type="text" class="form-control" id="LastName" placeholder="Last name" data-validation-required="Please enter your last name."> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="DonationType" class="sr-only">Donation Type</label> 
 
\t \t \t \t \t <input type="radio" name="DonationType" id="DonationTypeIndividual" value="0" checked=""> Individual Donation<br> 
 
    \t \t \t \t \t <input type="radio" name="DonationType" id="DonationTypeCorporate" value="1"> Corporate Donation<br> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="CompanyName" class="sr-only">Company name</label> 
 
\t \t \t \t \t <input disabled="" type="text" class="form-control" id="CompanyName" placeholder="Company name"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="alert alert-warning" role="alert"> 
 
\t \t \t \t \t Please ensure that the address entered below matches the billing address for your credit card. 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="Street01" class="sr-only">Street</label> 
 
\t \t \t \t \t <input type="text" class="form-control" id="Street01" placeholder="Street address" data-validation-required="Please enter your street address."> 
 
\t \t \t \t \t <input type="text" class="form-control" id="Street02" placeholder=""> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="City" class="sr-only">City</label> 
 
\t \t \t \t \t <input type="text" class="form-control" id="City" placeholder="City" data-validation-required="Please enter your city."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="State" class="sr-only">State/Territory</label> 
 
\t \t \t \t \t <select id="State" class="form-control"> 
 
\t \t \t \t \t \t <option>State/territory</option> 
 
\t \t \t \t \t \t <option value="AL">Alabama</option> 
 
\t \t \t \t \t \t <option value="AK">Alaska</option> 
 
\t \t \t \t \t \t <option value="AS">American Samoa</option> 
 
\t \t \t \t \t \t <option value="AZ">Arizona</option> 
 
\t \t \t \t \t \t <option value="AR">Arkansas</option> 
 
\t \t \t \t \t \t <option value="CA">California</option> 
 
\t \t \t \t \t \t <option value="CO">Colorado</option> 
 
\t \t \t \t \t \t <option value="CT">Connecticut</option> 
 
\t \t \t \t \t \t <option value="DE">Delaware</option> 
 
\t \t \t \t \t \t <option value="DC">District Of Columbia</option> 
 
\t \t \t \t \t \t <option value="FM">Federated States Of Micronesia</option> 
 
\t \t \t \t \t \t <option value="FL">Florida</option> 
 
\t \t \t \t \t \t <option value="GA">Georgia</option> 
 
\t \t \t \t \t \t <option value="GU">Guam</option> 
 
\t \t \t \t \t \t <option value="HI">Hawaii</option> 
 
\t \t \t \t \t \t <option value="ID">Idaho</option> 
 
\t \t \t \t \t \t <option value="IL">Illinois</option> 
 
\t \t \t \t \t \t <option value="IN">Indiana</option> 
 
\t \t \t \t \t \t <option value="IA">Iowa</option> 
 
\t \t \t \t \t \t <option value="KS">Kansas</option> 
 
\t \t \t \t \t \t <option value="KY">Kentucky</option> 
 
\t \t \t \t \t \t <option value="LA">Louisiana</option> 
 
\t \t \t \t \t \t <option value="ME">Maine</option> 
 
\t \t \t \t \t \t <option value="MH">Marshall Islands</option> 
 
\t \t \t \t \t \t <option value="MD">Maryland</option> 
 
\t \t \t \t \t \t <option value="MA">Massachusetts</option> 
 
\t \t \t \t \t \t <option value="MI">Michigan</option> 
 
\t \t \t \t \t \t <option value="MN">Minnesota</option> 
 
\t \t \t \t \t \t <option value="MS">Mississippi</option> 
 
\t \t \t \t \t \t <option value="MO">Missouri</option> 
 
\t \t \t \t \t \t <option value="MT">Montana</option> 
 
\t \t \t \t \t \t <option value="NE">Nebraska</option> 
 
\t \t \t \t \t \t <option value="NV">Nevada</option> 
 
\t \t \t \t \t \t <option value="NH">New Hampshire</option> 
 
\t \t \t \t \t \t <option value="NJ">New Jersey</option> 
 
\t \t \t \t \t \t <option value="NM">New Mexico</option> 
 
\t \t \t \t \t \t <option value="NY">New York</option> 
 
\t \t \t \t \t \t <option value="NC">North Carolina</option> 
 
\t \t \t \t \t \t <option value="ND">North Dakota</option> 
 
\t \t \t \t \t \t <option value="MP">Northern Mariana Islands</option> 
 
\t \t \t \t \t \t <option value="OH">Ohio</option> 
 
\t \t \t \t \t \t <option value="OK">Oklahoma</option> 
 
\t \t \t \t \t \t <option value="OR">Oregon</option> 
 
\t \t \t \t \t \t <option value="PW">Palau</option> 
 
\t \t \t \t \t \t <option value="PA">Pennsylvania</option> 
 
\t \t \t \t \t \t <option value="PR">Puerto Rico</option> 
 
\t \t \t \t \t \t <option value="RI">Rhode Island</option> 
 
\t \t \t \t \t \t <option value="SC">South Carolina</option> 
 
\t \t \t \t \t \t <option value="SD">South Dakota</option> 
 
\t \t \t \t \t \t <option value="TN">Tennessee</option> 
 
\t \t \t \t \t \t <option value="TX">Texas</option> 
 
\t \t \t \t \t \t <option value="UT">Utah</option> 
 
\t \t \t \t \t \t <option value="VT">Vermont</option> 
 
\t \t \t \t \t \t <option value="VI">Virgin Islands</option> 
 
\t \t \t \t \t \t <option value="VA">Virgina</option> 
 
\t \t \t \t \t \t <option value="WA">Washington</option> 
 
\t \t \t \t \t \t <option value="WV">West Virginia</option> 
 
\t \t \t \t \t \t <option value="WI">Wisconsin</option> 
 
\t \t \t \t \t \t <option value="WY">Wyoming</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="ZIPCode" class="sr-only">ZIP Code</label> 
 
\t \t \t \t \t <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."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="Email" class="sr-only">Email</label> 
 
\t \t \t \t \t <input type="email" class="form-control" id="Email" placeholder="Email address" data-validation-required="Please enter your email address."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="Phone" class="sr-only">Phone</label> 
 
\t \t \t \t \t <input type="tel" class="form-control" id="Phone" placeholder="Phone" data-validation-format="Please enter a valid phone number."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="Fax" class="sr-only">Fax</label> 
 
\t \t \t \t \t <input type="tel" class="form-control" id="Fax" placeholder="Fax" data-validation-format="Please enter a valid fax number."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <hr> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <input type="checkbox" id="InHonorOf"> 
 
\t \t \t \t \t <label for="InHonorOfName">In honor of</label> 
 
\t \t \t \t \t <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."> 
 
\t \t \t \t </div> \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <input type="checkbox" id="InMemoryOf"> 
 
\t \t \t \t \t <label for="InMemoryOfName">In memory of</label> 
 
\t \t \t \t \t <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."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="GiftNotification" class="sr-only">Gift Notification</label> 
 
\t \t \t \t \t <input type="radio" name="GiftNotificationMethod" id="GiftNotificationMethodNone" value="0" checked=""> None<br> 
 
    \t \t \t \t \t <input type="radio" name="GiftNotificationMethod" id="GiftNotificationMethodEmail" value="1"> By Email<br> 
 
\t \t \t \t \t <input type="radio" name="GiftNotificationMethod" id="GiftNotificationMethodMail" value="2"> By Mail<br> 
 
\t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="GiftNotificationMessage" class="sr-only">Message</label> 
 
\t \t \t \t \t <textarea disabled="" class="form-control" id="GiftNotificationMessage" placeholder="Your message..." rows="4"></textarea> 
 
\t \t \t \t </div> \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="GiftNotificationName" class="sr-only">Recipient's Name</label> 
 
\t \t \t \t \t <input disabled="" type="text" class="form-control" id="GiftNotificationName" placeholder="City" data-validation-required="Please enter your gift notification recipient's name."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="GiftNotificationEmail" class="sr-only">Recipient's Email</label> 
 
\t \t \t \t \t <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."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="GiftNotificationStreet01" class="sr-only">Street</label> 
 
\t \t \t \t \t <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."> 
 
\t \t \t \t \t <input disabled="" type="text" class="form-control" id="GiftNotificationStreet02" placeholder=""> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="GiftNotificationCity" class="sr-only">City</label> 
 
\t \t \t \t \t <input disabled="" type="text" class="form-control" id="GiftNotificationCity" placeholder="Recipient's City" data-validation-required="Please enter a city for the gift notification."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="GiftNotificationState" class="sr-only">State/Territory</label> 
 
\t \t \t \t \t <select disabled="" id="GiftNotificationState" class="form-control"> 
 
\t \t \t \t \t \t <option>Recipient's state/territory</option> 
 
\t \t \t \t \t \t <option value="AL">Alabama</option> 
 
\t \t \t \t \t \t <option value="AK">Alaska</option> 
 
\t \t \t \t \t \t <option value="AS">American Samoa</option> 
 
\t \t \t \t \t \t <option value="AZ">Arizona</option> 
 
\t \t \t \t \t \t <option value="AR">Arkansas</option> 
 
\t \t \t \t \t \t <option value="CA">California</option> 
 
\t \t \t \t \t \t <option value="CO">Colorado</option> 
 
\t \t \t \t \t \t <option value="CT">Connecticut</option> 
 
\t \t \t \t \t \t <option value="DE">Delaware</option> 
 
\t \t \t \t \t \t <option value="DC">District Of Columbia</option> 
 
\t \t \t \t \t \t <option value="FM">Federated States Of Micronesia</option> 
 
\t \t \t \t \t \t <option value="FL">Florida</option> 
 
\t \t \t \t \t \t <option value="GA">Georgia</option> 
 
\t \t \t \t \t \t <option value="GU">Guam</option> 
 
\t \t \t \t \t \t <option value="HI">Hawaii</option> 
 
\t \t \t \t \t \t <option value="ID">Idaho</option> 
 
\t \t \t \t \t \t <option value="IL">Illinois</option> 
 
\t \t \t \t \t \t <option value="IN">Indiana</option> 
 
\t \t \t \t \t \t <option value="IA">Iowa</option> 
 
\t \t \t \t \t \t <option value="KS">Kansas</option> 
 
\t \t \t \t \t \t <option value="KY">Kentucky</option> 
 
\t \t \t \t \t \t <option value="LA">Louisiana</option> 
 
\t \t \t \t \t \t <option value="ME">Maine</option> 
 
\t \t \t \t \t \t <option value="MH">Marshall Islands</option> 
 
\t \t \t \t \t \t <option value="MD">Maryland</option> 
 
\t \t \t \t \t \t <option value="MA">Massachusetts</option> 
 
\t \t \t \t \t \t <option value="MI">Michigan</option> 
 
\t \t \t \t \t \t <option value="MN">Minnesota</option> 
 
\t \t \t \t \t \t <option value="MS">Mississippi</option> 
 
\t \t \t \t \t \t <option value="MO">Missouri</option> 
 
\t \t \t \t \t \t <option value="MT">Montana</option> 
 
\t \t \t \t \t \t <option value="NE">Nebraska</option> 
 
\t \t \t \t \t \t <option value="NV">Nevada</option> 
 
\t \t \t \t \t \t <option value="NH">New Hampshire</option> 
 
\t \t \t \t \t \t <option value="NJ">New Jersey</option> 
 
\t \t \t \t \t \t <option value="NM">New Mexico</option> 
 
\t \t \t \t \t \t <option value="NY">New York</option> 
 
\t \t \t \t \t \t <option value="NC">North Carolina</option> 
 
\t \t \t \t \t \t <option value="ND">North Dakota</option> 
 
\t \t \t \t \t \t <option value="MP">Northern Mariana Islands</option> 
 
\t \t \t \t \t \t <option value="OH">Ohio</option> 
 
\t \t \t \t \t \t <option value="OK">Oklahoma</option> 
 
\t \t \t \t \t \t <option value="OR">Oregon</option> 
 
\t \t \t \t \t \t <option value="PW">Palau</option> 
 
\t \t \t \t \t \t <option value="PA">Pennsylvania</option> 
 
\t \t \t \t \t \t <option value="PR">Puerto Rico</option> 
 
\t \t \t \t \t \t <option value="RI">Rhode Island</option> 
 
\t \t \t \t \t \t <option value="SC">South Carolina</option> 
 
\t \t \t \t \t \t <option value="SD">South Dakota</option> 
 
\t \t \t \t \t \t <option value="TN">Tennessee</option> 
 
\t \t \t \t \t \t <option value="TX">Texas</option> 
 
\t \t \t \t \t \t <option value="UT">Utah</option> 
 
\t \t \t \t \t \t <option value="VT">Vermont</option> 
 
\t \t \t \t \t \t <option value="VI">Virgin Islands</option> 
 
\t \t \t \t \t \t <option value="VA">Virgina</option> 
 
\t \t \t \t \t \t <option value="WA">Washington</option> 
 
\t \t \t \t \t \t <option value="WV">West Virginia</option> 
 
\t \t \t \t \t \t <option value="WI">Wisconsin</option> 
 
\t \t \t \t \t \t <option value="WY">Wyoming</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="GiftNotificationZIPCode" class="sr-only">ZIP code</label> 
 
\t \t \t \t \t <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."> 
 
\t \t \t \t </div> 
 
\t \t \t \t <hr> 
 
\t \t \t \t 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="CardNumber" class="sr-only">Card number</label> 
 
\t \t \t \t \t <input type="number" class="form-control" id="CardNumber" placeholder="Card number" data-validation-required="Please enter a valid credit card number." maxlength="16"> 
 
\t \t \t \t \t <span>Numbers only, no spaces or dashes</span> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="CardExpirationDate" class="sr-only">Card expiration date</label> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t \t <span>MM/YY</span> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t <label for="CardSecurityCode" class="sr-only">Card security code</label> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="form-group"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <button type="submit" id="DonationFormSubmit" class="btn btn-primary">Send donation</button> \t 
 
\t \t \t </form>

+0

[この質問を参照](http://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script)それはあなたを助けるかもしれません。 – Shrabanee

+0

validate()の内部に[submit handler](https://jqueryvalidation.org/validate#submithandler)は必要ありませんか? – Shrabanee

+0

@ titi23、いいえ、それはすでにプラグインに組み込まれています。 ajaxによる提出など、デフォルトをオーバーライドする場合にのみ使用してください。 – Sparky

答えて

2

なしname属性を持っていません。検証のために考慮されるすべての要素は、nameを含むでなければなりません。

rules: { 
    DonationAmount: { // <- NAME attribute 
     required: true 
    }, 
    FullName: {  // <- NAME attribute 
     required: true 
    } .... 
関連する問題