javascript - jQuery Validate 不会在提交时触发？

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

所有输入元素都没有 name 属性。考虑验证的每个元素必须包含唯一的名称。

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