Javascript form validation and show the input/selected result below the submit button
Question
Need to do:
1) If user forget/miss one or more field then should show errors when click submit button.
2) Show those input/selected the result below the submit button.
What I did:
1) In the first and last name field I used html5 tag "required" to show error.
2) I added javascript code for next 4 field. Actually, it works but it works for first radio field only. But if i delete for that specific radio field code then it will works next field select option code only...Similarly is happen next two field. Don't understanding why not showing all errors at same time?
3) For showing result, I coded for first name, last name and gender but it is not working. And I don't understanding how to code for selected option value and checked box for showing result.
Any help?
function showInput() { // No:1 For radio button code var elem = document.forms["formSurvey"].elements['sex']; len = elem.length-1; chkvalue = ""; for(i=0; i<=len; i++) { if(elem[i].checked)chkvalue = elem[i].value; } if(chkvalue=="") { document.getElementById("errorg1").innerHTML = "NO button Checked"; return false; } else { var gendershow = document.getElementById("gendershow1").value; document.getElementById("gendershow1").innerHTML = gendershow; return true; } // No:2 For select option button code if(document.getElementById("choose").value=="") { document.getElementById("errorChoose").innerHTML = "Please select session!"; return false; } else { var sessionShow1 = document.getElementById("selectSession").value; document.getElementById("selectSession").innerHTML = sessionShow1; return true; } // No:3 For Check button code var allchecked = 0; if(document.getElementById("int").checked)allchecked = 1; if(document.getElementById("sch").checked)allchecked = 1; if(document.getElementById("cur").checked)allchecked = 1; if(allchecked == 0) { document.getElementById("errorg2").innerHTML = "Please check the value"; return false; } else { var checkIt = document.getElementById("checkButton").value; document.getElementById("checkButton").innerHTML = checkIt; return true; } // No:4 Show the input/selected result var first_name = document.getElementById("fname").value; document.getElementById("display_fname").innerHTML = first_name; var last_name = document.getElementById("lname").value; document.getElementById("display_lname").innerHTML = last_name; var tellGender = document.getElementByName("sex").value; document.getElementById("gendershow1").innerHTML = tellGender; }
<!DOCTYPE html> <html> <head> <title>CSE </title> </head> <body> <div class="content"> <!-- Enter information about CSE Center --> <p> <form name="formSurvey" onsubmit="return showInput()" action="index.html" method="post"> <p>First name: <input type="text" name="fname" id="fname" required> </p> <p>Last name: <input type="text" name="lname" id="lname" required></p> <br> <h4> Gender:</h4> <p><input type="radio" name="sex" value="Male" id="gender1"> Male</p> <p><input type="radio" name="sex" value="Female" id="gender2" > Female</p> <p><input type="radio" name="sex" value="Prefer" id="gender3" > Prefer not to include</p> <p><span style="color:red;" id="errorg1"></span></p> <br> <h4> Which semester do you plan on attending?</h4> <select id="choose"> <option value="">Choose a session</option> <option value="summer">Summer 2015</option> <option value="fall">Fall 2015</option> <option value="spring">Spring 2016</option> </select> <p><span style="color:red;" id="errorChoose"></span></p> <br> <h4>How did you hear about PSU?</h4> <p><span style="color:red;" id="errorg2"></span></p> <p><input type="checkbox" name="pt" value="Internet" id="int"> Internet Site</p> <p><input type="checkbox" name="pt" value="School Fair" id="sch" > While attending school fair.</p> <p><input type="checkbox" name="pt" value="Current Student" id="cur"> Current Student of PSU</p><br> <input type="submit" value="Submit"> <br> </form> <p><span id="display_fname"></span></p> <p><span id="display_lname"></span></p> <p><span id="gendershow1"></span></p> <p><span id="selectSession"></span></p> <p><span id="checkButton"></span></p> </p> </div> <script src="script.js"></script> </body> </html>
1 answers
solution1
0 2015-07-09 09:01:57
From a quick lookover it seems that the reason why it's not showing all the errors at the same time is because of two reasons:
You use an
if/elseif/elsestatement which will only allow for one to be true.You are returning every time you find something wrong. This will not allow the other statements to run before you return.
So changing the first thing to multiple if statements and then not returning as soon as you find an error will most likely solve your problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.