javascript - jQuery Validate not firing on submit? -
i running issue jquery validate plugin [ https://jqueryvalidation.org/ ] not firing on form submit.
the script checks out no syntax errors in lint. google chrome developer console not reporting issues.
yet form submits without validating anything.
see code snippet below.
$(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 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 , last name</label> <div id="fullname"> <input type="text" class="form-control" id="firstname" placeholder="first name" data-validation-required="please enter first name."> <input type="text" class="form-control" id="lastname" placeholder="last name" data-validation-required="please enter 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 address entered below matches billing address 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 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 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 zip code." data-validation-format="please enter 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 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 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 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 name of individual giving 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 name of individual giving 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"> email<br> <input type="radio" name="giftnotificationmethod" id="giftnotificationmethodmail" value="2"> 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 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 gift notification recipient's email address." data-validation-format="please enter 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 street address 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 city 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 zip code gift notification." data-validation-format="please enter 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 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 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 credit card's security code." data-validation-format="please enter 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>
none of input elements have name attribute. every element considered validation must contain unique name.
rules: { donationamount: { // <- name attribute required: true }, fullname: { // <- name attribute required: true } .... 
Comments
Post a Comment