Javascript表單驗證，並在“提交”按鈕下方顯示輸入/選定的結果

Question

需要做：

1）如果用戶忘記/錯過一個或多個字段，則在單擊“提交”按鈕時應顯示錯誤。
2）在提交按鈕下方顯示輸入/選擇的結果。

我做了什么：

1）在名字和姓氏字段中，我使用了html5標簽“ required”來顯示錯誤。
2）我為接下來的4個字段添加了javascript代碼。 實際上，它可以工作，但僅適用於第一個無線電場。 但是，如果我刪除該特定的無線電場代碼，那么它將僅在下一個場選擇選項代碼中起作用...類似地，在下兩個場中也會發生。 不明白為什么不同時顯示所有錯誤？
3）為了顯示結果，我用名字，姓氏和性別編碼，但是不起作用。 而且我不理解如何為選定的選項值和顯示結果的復選框編碼。

有什么幫助嗎？

 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>

Answer 1

通過快速瀏覽，似乎不能同時顯示所有錯誤的原因有兩個：

您使用if/elseif/else語句，該語句僅允許一個為真。
每當發現問題時，您都將返回。 這將不允許其他語句在返回之前運行。

因此，將第一件事更改為多個if語句，然后在發現錯誤后不立即返回將很可能解決您的問題。

Javascript表單驗證，並在“提交”按鈕下方顯示輸入/選定的結果

問題描述

1 個解決方案

解決方案1
0 2015-07-09 09:01:57

Javascript表單驗證，並在“提交”按鈕下方顯示輸入/選定的結果

問題描述

1 個解決方案

解決方案1 0 2015-07-09 09:01:57

解決方案1
0 2015-07-09 09:01:57