jQuery Validate无法在提交时触发? [英] jQuery Validate not firing on submit?
本文介绍了jQuery Validate无法在提交时触发?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到了一个问题，其中jQuery验证插件[ https://jqueryvalidation.org/]不是在我的表单上触发提交.
I am running into an issue where the jQuery validate plugin [ https://jqueryvalidation.org/ ] is not firing on my form submit.
脚本在Lint中签出时没有语法错误. Google Chrome开发者控制台未报告任何问题.
The script checks out with no syntax errors in Lint. The Google Chrome developer console is not reporting any issues.
但是，表单只是提交而没有验证任何内容.
Yet the form just submits without validating anything.
请参见下面的代码段.
$(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>
推荐答案
所有输入元素都没有name属性. 必须考虑进行验证的每个元素都包含唯一的name.
None of the input elements have a name attribute. Every element considered for validation must contain a unique name.
rules: {
DonationAmount: { // <- NAME attribute
required: true
},
FullName: { // <- NAME attribute
required: true
} ....
这篇关于jQuery Validate无法在提交时触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
