validation - Validate field with JavaScript only if specified style is present - no jQuery Validate -
i have form fields required if corresponding radio button checked. site i'm plugging has many issues jquery hoping validation javascript - can't jquery validate plugin work correctly. beginner javascript , jquery.
there fields contained within list elements use jquery show/hide depending on radio button. list elements start inline, "display: none;". there way javascript can run validation if inline style of list item id "display: block"?
i have been working on way long , going nuts.
here html:
<form name="pancettaform" method="post" action="http://lizlantz.com/lcform.php" id="pancettaform" onsubmit="return validateform()"> <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> </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> </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> here jquery using:
$j(document).ready(function() { $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(); } }); }); and here general structure of validation script far:
function validateform() { var x=document.forms["pancettaform"]["order-number"].value; if (x==null || x=="") { alert("please provide order number."); return false; } var x=document.forms["pancettaform"]["full-name"].value; if (x==null || x=="") { alert("please provide full name."); return false; } var x=document.forms["pancettaform"]["address1"].value; if (x==null || x=="") { alert("please provide address."); return false; } var x=document.forms["pancettaform"]["city"].value; if (x==null || x=="") { alert("please provide city."); return false; } if( document.pancettaform.state.value == "- select state -" ) { alert( "please provide state." ); return false; } var x=document.forms["pancettaform"]["zip"].value; if (x==null || x=="") { alert("please provide zip code."); return false; } var x=document.forms["pancettaform"]["zip_code"].value; if (x==null || x=="") { alert("please provide zip code."); return false; } if( document.pancettaform.newship.value == "- select date -" ) { alert( "please select size of product register. " ); return false; } }
you can use this
var display= document.getelementbyid('someid').style.display; if(display=='block') { //do validation here. } an example fiddle
Comments
Post a Comment