Form with two sections - Javascript Validation -

Form with two sections - Javascript Validation -

i have form (below) 2 sections. each section contains own fields. need create sure @ to the lowest degree 1 section completely filled out before user can submit form. if in section 1, user email field entered preferred colors must filled-out , section 2 optional.

similarly, if section 2 has entered user id, gender should checked. , section 1 optional. how do this? javascript logic wrong below.

submission form - 2 sections.

<script> function validate() { if ((document.frm.userid.value == "" && document.frm.useremail.value == "")) { if (document.frm.userid.value != "" && document.frm.useremail.value == "" || document.frm.userid.value == "" && document.frm.useremail.value != "") { homecoming true; }else { homecoming false; } } return( true ); } </script> <form action="#" id="frm" method="post" name="frm" onsubmit="return(validate())"> --------- section 1 ----------- user email*: <input type="text" name="useremail"> <p><b>preferred color*:</b></p> <input type="radio" name="preferred_color" value="red" /> red<br /> <input type="radio" name="preferred_color" value="blue" /> blue<br /> <input type="radio" name="preferred_color" value="green" /> green<br /> --------- section 2 ----------- user id *: <input type="text" name="userid" value=""> gender*: <input type="radio" name="sex" value="male">male<br> <input type="radio" name="sex" value="female">female <input type="submit" value="submit"> </form>

try returning true if (all inputs in section 1 have value) or (all inputs in section 2 have value)

function validate() { var result = (document.frm.useremail.value != "" && document.frm.preferred_color.value != "") || (document.frm.userid.value != "" && document.frm.sex.value != ""); homecoming result; }

update: if want more scalable solution, seek using code below (it requires jquery). way, if add together new inputs either section, automatically checked validation function. basically, loop through form fields within section1 , section2, , create sure each field has value. note add-on of <div id="section1"> , <div id="section2">.

<form action="#" id="frm" method="post" name="frm" onsubmit="return validate();"> <div id="section1"> user email*: <input type="text" name="useremail" /><br /> preferred color*:<br /> <label><input type="radio" name="preferred_color" value="blue" />blue</label><br /> <label><input type="radio" name="preferred_color" value="green" />green</label> <!--newly added requirement if , if greenish selected--> <input type="checkbox" name="preferred_color_green" value="blackshoes">green goes w black<br> <input type="checkbox" name="preferred_color_green" value="favoritecolor">its favorite color </div> <br /> <br /> <div id="section2"> user id *: <input type="text" name="userid" value="" /><br /> gender*:<br /> <label><input type="radio" name="sex" value="male" />male</label><br /> <label><input type="radio" name="sex" value="female" />female</label> <!--newly added requirement if , if female selected--> <input type="checkbox" name="vehicle" value="bike">buy female bike<br> <input type="checkbox" name="vehicle" value="car">buy smaller auto </div> <input type="submit" value="submit" /> </form>

and javascript:

function validate() { // valid if fields in section1 or section2 entered homecoming validatesection("section1") || validatesection("section2"); } function validatesection(section) { var inputs = $("#" + section + " input, #" + section + " textarea, #" + section + " select"); // create sure each field has value (var = 0; < inputs.length; i++) { var input = inputs[i]; if (input.type == "button" || input.type == "submit" || input.type == "checkbox") { // ignore buttons , check boxes continue; } if (input.type == "radio") { // handle radio buttons specially. // have value, create sure 1 of them checked. var items = document.frm.elements[input.name]; var selected = false; for( var j = 0; j < items.length; j++) { if (items[j].checked) { selected = true; break; } } if (!selected) { homecoming false; } } else if (input.value == "") { homecoming false; } } homecoming true; }

fiddle: http://jsfiddle.net/5jsfu1uc/6/

javascript validation