forms - Make multiple fields required if one option or another is checked jQuery Validate -
in form, new fields appear depending on radio button option required. validate fields if corresponding radio button required.
if first option selected, address, city, state, , zip required. if 2nd option selected, date required if 3rd option selected, of fields above required.
i have posted fiddle here of have far: http://jsfiddle.net/aegk8/1/
what figure out way write rule field required if 1 option or other checked. like
address: { required: "#ship-address:checked or #ship-both:checked" }, city: { required: "#ship-address:checked or #ship-both:checked" } i need update rule selects, required if 1 of options checked. how can this? first time trying implement i'm open suggestions.
i 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. show/hide functionality have not work when reference jquery 1.3.2.
here code:
<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.validator.addmethod("valuenotequals", function(value, element, arg){ return arg != value; }, "please select new shipping date."); $j('#pancettaform').change(function () { $j('#address,#address2,#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({ rules: { address: { required: "#ship-address:checked" }, newship: { valuenotequals: "- select -" } }, messages: { updateship: { required: "please tell how update order." }, selectname: { valuenotequals: "please select new shipping date." } } }); }); </script> and 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="updateship">i'd to:</label> <input id="ship-address" name="updateship" type="radio" value="update-ship-address" class="required"/> have pancetta shipped different address skillet<br /> <input id="ship-date" name="updateship" type="radio" value="update-ship-date" class="required" /> have pancetta shipped sooner june 14, 2013 <br /> <input id="ship-both" name="updateship" type="radio" value="update-both" class="required"/> 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" class="required"> </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 (saturday-tuesday delivery not available):</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" class="required"> </li> </ul> <input type="submit" id="button" name="submit" value="update pancetta"> </form>
address: { required: { depends: function(element) { return $('#ship-address').is(':checked') || $('#ship-both').is(':checked'); } } }, city: { required: { depends: function(element) { return $('#ship-address').is(':checked') || $('#ship-both').is(':checked'); } } } as selects, i'm not sure ones refer, idea same, based on dependency.
Comments
Post a Comment