我遇到的问题是jQuery validate plugin [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>
答案 0 :(得分：2)
没有输入元素具有name属性。考虑进行验证的每个元素必须包含唯一的name。
rules: {
DonationAmount: { // <- NAME attribute
required: true
},
FullName: { // <- NAME attribute
required: true
} ....