Javascript表单验证，并在“提交”按钮下方显示输入/选定的结果
[英]Javascript form validation and show the input/selected result below the submit button
问题描述
Need to do: 
需要做：
1) If user forget/miss one or more field then should show errors when click submit button. 1）如果用户忘记/错过一个或多个字段，则在单击“提交”按钮时应显示错误。
2) Show those input/selected the result below the submit button. 2）在提交按钮下方显示输入/选择的结果。
What I did: 我做了什么：
1) In the first and last name field I used html5 tag "required" to show error. 1）在名字和姓氏字段中，我使用了html5标签“ required”来显示错误。
2) I added javascript code for next 4 field. 2）我为接下来的4个字段添加了javascript代码。 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. 3）为了显示结果，我用名字，姓氏和性别编码，但是不起作用。 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 个解决方案
解决方案1
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.您使用if/elseif/else语句，该语句仅允许一个为真。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. 因此，将第一件事更改为多个if语句，然后在发现错误后不立即返回将很可能解决您的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.