jQuery Validation PlugIn issue - form will not submit -
i using jquery validate plug-in first time based on instructions here , it's not working. when try submit form required field empty, see error message, form not submit. i'm new jquery challenging troubleshoot on own.
it not due self closing script tags suggested here found this too, not seeing errors in console.
what doing wrong?
also, after type required field, message disappears , class "valid" added input, along error class. undesirable - how can remove it?
another - implementing on site uses 1.3.2 library (which can't change or remove), , show/hide on fields not work that, have run newer library in parallel.
i posted fiddle here: http://jsfiddle.net/4mhnc/1/
and here code:
scripts:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> jquery.validator.setdefaults({ debug: true, success: "valid" }); </script> <script>var $j = jquery.noconflict(true);</script> <script type="text/javascript"> $j(document).ready(function() { $j('#pancettaform').change(function () { $j('#address,#new-ship-date').hide(); if ($j('#ship-address').prop('checked')) { $j('#address, #address2').show(); } else if ($j('#ship-date').prop('checked')) { $j('#new-ship-date').show(); } else if ($j('#ship-both').prop('checked')) { $j('#address, #address2, #new-ship-date').show(); } }); $j("#pancettaform").validate(); }); </script> html:
<form name="pancettaform" method="post" action="http://lizlantz.com/lcform.php" id="pancettaform"> <input type="hidden" value="pancetta order update" name="subject"> <input type="hidden" value="cookware/partners_10151_-1_20002" name="redirect"> <ul> <li> <label for="update-ship">i'd to:</label> <input id="ship-address" name="update-ship" type="radio" value="update-ship-address"/> have pancetta shipped different address skillet<br /> <input id="ship-date" name="update-ship" type="radio" value="update-ship-date" /> have pancetta shipped sooner june 14, 2013 <br /> <input id="ship-both" name="update-ship" type="radio" value="update-both" /> make changes both shipping address , shipping date </li> <li> <label for="order-number"><em>*</em>order number (available in order confirmation email):</label> <input type="text" name="order-number" class="required"> </li> <li> <label for="full-name"><em>*</em>recipient full name:</label> <input type="text" name="full-name"> </li> <li id="address" style="display: none;"> <label for="address"> <em>*</em>address </label> <input type="text" name="address"> <label for="address2"> address line 2 </label> <input type="text" name="address2"> </li> <li id="address2" style="display: none;"> <label for="city"> <em>*</em>city </label> <input type="text" name="city"> <label for="state"> <em>*</em>state </label> <select name="state"> <option>- select state -</option> <option value="al">alabama</option> <option value="ak">alaska</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="fl">florida</option> <option value="ga">georgia</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="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="oh">ohio</option> <option value="ok">oklahoma</option> <option value="or">oregon</option> <option value="pa">pennsylvania</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="va">virginia</option> <option value="wa">washington</option> <option value="wv">west virginia</option> <option value="wi">wisconsin</option> <option value="wy">wyoming</option> </select> <label for="zip"> <em>*</em>zip code </label> <input type="text" name="zip"> </li> <li id="new-ship-date" style="display: none;"> <label for="new ship date"><em>*</em>new ship date:</label> <select name="newship" id="newship"> <option>- select -</option> <option value="wednesday, may 22">wednesday, may 22</option> <option value="thursday, may 23">thursday, may 23</option> <option value="friday, may 24">friday, may 24</option> <option value="wednesday, may 29">wednesday, may 29</option> <option value="thursday, may 30">thursday, may 30</option> <option value="friday, may 31">friday, may 31</option> <option value="wednesday, june 5">wednesday, june 5</option> <option value="thursday, june 6">thursday, june 6</option> <option value="friday, june 8">friday, june 8</option> <option value="wednesday, june 12">wednesday, june 12</option> <option value="thursday, june 13">thursday, june 13</option> <option value="friday, june 14">friday, june 14 </option> <option value="wednesday, june 19">wednesday, june 19</option> <option value="thursday, june 20">thursday, june 20</option> <option value="friday, june 21">friday, june 21</option> </select> </li> <li> <label for="phone"> <em>*</em>phone (for delivery questions) </label> <input type="text" name="phone"> </li> </ul> <input type="submit" id="button" name="submit" value="update pancetta"> </form>
the debug: true option, design, prevent form submitting.
remove it.
you've included 2 versions of jquery reason.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> this bad practice can interfere each other, remove older version.
Comments
Post a Comment