使用表單，javascript驗證不起作用

Question

我想將值發布到下一頁，所以我必須使用<form></form>標簽。 但是當我在代碼中插入標記時，驗證代碼無效，我不知道我的代碼會發生什么。 有人可以告訴我如何解決它。 使用標簽，1和4選項驗證不起作用，但同時使用2和3選項驗證工作正常。 我的問題是 - 1和4的子代碼，代碼驗證究竟發生了什么，為什么它不起作用。

 window.onload=function(){ document.getElementById("firstsubque1").style.display='none'; document.getElementById("firstsubque2").style.display='none'; document.getElementById("second").style.display='none'; document.getElementById("third").style.display='none'; document.getElementById("fourthsubque1").style.display='none'; document.getElementById("fourthsubque2").style.display='none'; } function showtech() { if(document.getElementById("ques1").checked) { document.getElementById("first").style.display='none'; return false; } } function firstque() { if(document.getElementById("ques1").checked) { document.getElementById("subopt1").style.display='block'; document.getElementById("tbl1").style.display='none'; document.getElementById("subopt2").style.display='block'; document.getElementById("subopt22").style.display='none'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; } } function firstqueUnchk() { if(!(document.getElementById("ques1").checked)) { document.getElementById("subopt1").style.display='none'; document.getElementById("subopt11").style.display='none'; document.getElementById("subopt2").style.display='none'; document.getElementById("subopt22").style.display='none'; document.getElementById("firstsubque1").style.display='none'; document.getElementById("firstsubque2").style.display='none'; } } function subopt1() { if(document.getElementById("subopt1").checked) { document.getElementById("tbl1").style.display='block'; document.getElementById("subopt22").style.display='none'; document.getElementById("subopt1").style.display='block'; document.getElementById("subopt2").style.display='block'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; } } function subopt1Unchk() { if(!(document.getElementById("subopt1").checked)) { document.getElementById("tbl1").style.display='none'; document.getElementById("subopt22").style.display='none'; document.getElementById("subopt1").style.display='block'; document.getElementById("subopt2").style.display='block'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; } } function subopt2() { if(document.getElementById("subopt2").checked) { document.getElementById("subopt11").style.display='none'; document.getElementById("tbl2").style.display='block'; document.getElementById("subopt1").style.display='block'; document.getElementById("subopt2").style.display='block'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; } } function subopt2Unchk() { if(!(document.getElementById("subopt2").checked)) { document.getElementById("subopt22").style.display='none'; document.getElementById("subopt11").style.display='none'; document.getElementById("subopt1").style.display='block'; document.getElementById("subopt2").style.display='block'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; } } function allChecked() { if((document.getElementById("subopt1").checked) && (document.getElementById("subopt2").checked)) { document.getElementById("subopt22").style.display='block'; document.getElementById("subopt11").style.display='block'; document.getElementById("subopt1").style.display='block'; document.getElementById("subopt2").style.display='block'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; } else if((document.getElementById("subopt1").checked) && (!(document.getElementById("subopt2").checked))) { document.getElementById("subopt11").style.display='block'; document.getElementById("subopt22").style.display='none'; document.getElementById("subopt1").style.display='block'; document.getElementById("subopt2").style.display='block'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; } else if((document.getElementById("subopt2").checked) && (!(document.getElementById("subopt1").checked))) { document.getElementById("subopt11").style.display='none'; document.getElementById("subopt22").style.display='block'; document.getElementById("subopt1").style.display='block'; document.getElementById("subopt2").style.display='block'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; } else if((document.getElementById("ques1").checked) && (document.getElementById("ques2").checked)) { document.getElementById("subopt1").style.display='block'; document.getElementById("subopt11").style.display='none'; document.getElementById("subopt2").style.display='block'; document.getElementById("subopt22").style.display='none'; document.getElementById("firstsubque1").style.display='block'; document.getElementById("firstsubque2").style.display='block'; document.getElementById("second").style.display='block'; } else if((!(document.getElementById("thirdsubque11").checked)) && (document.getElementById("thirdsubque222").checked)) { document.getElementById("thirdsubque2").style.display='none'; document.getElementById("thirdsubque2222").style.display='none'; document.getElementById("thirdsubque2222").style.display='none'; } else if((document.getElementById("thirdsubque11").checked) && (document.getElementById("thirdsubque222").checked)) { document.getElementById("thirdsubque2").style.display='block'; document.getElementById("thirdsubque22").style.display='block'; document.getElementById("thirdsubque2222").style.display='block'; } else if((document.getElementById("ques4").checked) && (document.getElementById("fourthsubque11").checked)) { document.getElementById("fourthsubque1").style.display='block'; document.getElementById("fourthsubque2").style.display='block'; document.getElementById("fourthsubque111").style.display='block'; } } function secondque() { if(document.getElementById("ques2").checked) { document.getElementById("subopt22").style.display='none'; document.getElementById("subopt11").style.display='none'; document.getElementById("subopt1").style.display='none'; document.getElementById("subopt2").style.display='none'; document.getElementById("firstsubque1").style.display='none'; document.getElementById("firstsubque2").style.display='none'; document.getElementById("second").style.display='block'; document.getElementById("secondsubque11").style.display='none'; document.getElementById("secondsubque1").style.display='block'; document.getElementById("secondsubque2").style.display='block'; } } function secondqueUnchk() { if(!(document.getElementById("ques2").checked)) { document.getElementById("second").style.display='none'; document.getElementById("secondsubque1").style.display='none'; document.getElementById("secondsubque2").style.display='none'; } } function secondsubque1Chk() { if(document.getElementById("secondsubque12").checked) { document.getElementById("secondsubque11").style.display='block'; document.getElementById("second").style.display='block'; document.getElementById("secondsubque111").style.display='none'; } } function secondsubque1Unchk() { if(!(document.getElementById("secondsubque12").checked)) { document.getElementById("secondsubque11").style.display='none'; document.getElementById("second").style.display='block'; document.getElementById("secondsubque111").style.display='none'; } } function secondsubque2Chk() { if(document.getElementById("secondsubque13").checked) { document.getElementById("secondsubque11").style.display='block'; document.getElementById("second").style.display='block'; document.getElementById("secondsubque111").style.display='block'; } } function secondsubque2Unchk() { if(!(document.getElementById("secondsubque13").checked)) { document.getElementById("secondsubque11").style.display='block'; document.getElementById("second").style.display='block'; document.getElementById("secondsubque111").style.display='none'; } } function thirdque() { if(document.getElementById("ques3").checked) { document.getElementById("third").style.display='block'; document.getElementById("thirdsubque2").style.display='none'; document.getElementById("thirdsubque222").style.display='none'; } } function thirdqueUnchk() { if(!(document.getElementById("ques3").checked)) { document.getElementById("third").style.display='none'; document.getElementById("thirdsubque2").style.display='none'; document.getElementById("thirdsubque222").style.display='none'; } } function thirdsubque1() { if(document.getElementById("thirdsubque11").checked) { document.getElementById("third").style.display='block'; document.getElementById("thirdsubque2").style.display='block'; document.getElementById("thirdsubque222").style.display='block'; document.getElementById("thirdsubque2222").style.display='none'; } } function thirdsubque1Unchk() { if(!(document.getElementById("thirdsubque11").checked)) { document.getElementById("third").style.display='block'; document.getElementById("thirdsubque2").style.display='none'; document.getElementById("thirdsubque2222").style.display='none'; } } function thirdsubque2() { if(document.getElementById("thirdsubque222").checked) { document.getElementById("third").style.display='block'; document.getElementById("thirdsubque2").style.display='block'; document.getElementById("thirdsubque2222").style.display='block'; } } function thirdsubque2Unchk() { if(!(document.getElementById("thirdsubque222").checked)) { document.getElementById("third").style.display='block'; document.getElementById("thirdsubque2").style.display='block'; document.getElementById("thirdsubque2222").style.display='none'; } } function fourthque() { if(document.getElementById("ques4").checked) { document.getElementById("fourthsubque1").style.display='block'; document.getElementById("fourthsubque2").style.display='block'; document.getElementById("fourthsubque111").style.display='none'; } } function fourthqueUnchk() { if(!(document.getElementById("ques4").checked)) { document.getElementById("fourthsubque1").style.display='none'; document.getElementById("fourthsubque2").style.display='none'; } } function fourthsubque1() { if(document.getElementById("ques4").checked) { document.getElementById("fourthsubque1").style.display='none'; document.getElementById("fourthsubque2").style.display='none'; } } function fourthsubque11() { if(document.getElementById("fourthsubque11").checked) { document.getElementById("fourthsubque1").style.display='block'; document.getElementById("fourthsubque2").style.display='block'; document.getElementById("fourthsubque111").style.display='block'; } } /*function validateque1() { document.getElementById("error1").innerHTML=""; if((document.getElementById("ques1").checked) && (document.getElementById("tbl1").checked)) { if((document.getElementById("select1").value=='') && (document.getElementById("select2").value=='') && (document.getElementById("select3").value=='') && (document.getElementById("select4").value=='') && (document.getElementById("select5").value=='') && (document.getElementById("select6").value=='') && (document.getElementById("select7").value=='') && (document.getElementById("select8").value=='')) { document.getElementById("error1").innerHTML="mandetory field"; document.form.tbl1.focus(); return false; } } return true; } */ 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script src="scripts/ques-valid.js"></script> </head> <body> <form > <table> <tr> <td width="28" style="padding:0;"><input type="checkbox" name="que1" id="ques1" onclick="firstque();firstqueUnchk();allChecked();" /></td> <td width="745" class="style10">Network</td> </tr> <tr style="margin-bottom:0"> <td style="padding:0;">&nbsp;</td> <td style="padding:0;" id="firstsubque1"> <ul style="list-style:none;"> <li style="float:left;"><input type="checkbox" name="select" style="float:left;" id="subopt1" onclick="subopt1();subopt1Unchk();allChecked();" />Internal </li><br /> <li style="float:left;padding-left: 5%;" id="subopt11"> <table width="100%" height="202" id="tbl1"> <tr> <td width="33%" style="padding: 0;">Number of Ips</td> <td width="67%" style="padding: 0;"><input type="text" placeholder="Number of IPs" name="select1" id="select1"/></td> </tr> <tr> <td style="padding:0;">Servers</td> <td style="padding:0;"><input type="text" placeholder="Servers" name="select2" id="select2" /></td></tr> <tr> <td style="padding:0;">Firewalls</td> <td style="padding:0;"><input type="text" placeholder="Firewalls" id="select3" name="select3" /></td></tr> </table> </li> </ul> </td> </tr> <tr style="margin-top:0;"> <td style="padding:0; visibility:hidden;"></td> <td style="padding:0;" id="firstsubque2"> <ul style="list-style:none;"> <li style="float:left;"><input onclick="subopt2();subopt2Unchk();allChecked();" style="float:left;" type="checkbox" name="select" id="subopt2" />External</li><br /> <li style="float:left;padding-left: 5%;" id="subopt22"> <table width="195%" id="tbl2"> <tr> <td width="39%" style="padding:0;">Ips</td> <td width="61%"style="padding:0;"><input type="text" placeholder="Number of IPs" name="select3" id="select3" /></td> </tr> </table> </li> </ul> </td> </tr> <tr> <td style="padding:0;"><input type="checkbox" name="que2" id="ques2" onclick="secondque();secondqueUnchk();allChecked();" /></td><td class="style10" style="padding:0;">Website</td></tr> <tr id="second"><td style="padding:0;"></td> <td width="415" style="padding-bottom:0; padding-top:0;"> <table width="110%" height="148"> <tr><td width="54%" style="padding:0;">websites</td> <td width="46%" style="padding:0;"><input type="text" size="30" placeholder="number of websites to be tested" /></td></tr> <tr><td style="padding:0;">language</td><td style="padding:0;"><select style="width: 70%;height: 22px;"> <option>-------select-------</option> <option value="">php</option> <option value="">Dot Net</option></select></td></tr> <tr><td style="padding:0;">Browser</td><td style="padding:0;"><select style="width: 70%;height: 22px;"> <option>------select------</option> <option value="">php</option> <option value="">Dot Net</option></select></td></tr> <tr><td style="padding:0;">Backend</td><td style="padding:0;"><select style="width: 70%;height: 22px;"> <option>------select------</option> <option value="">php</option> <option value="">Dot Net</option></select></td></tr></table> <ul style="list-style:none;"> <li style="float:left;" id="secondsubque1"><input type="checkbox" id="secondsubque12" onclick="secondsubque1Chk();secondsubque1Unchk()" />Regular<br /><br /> <ul style="list-style:none;" id="secondsubque11"> <li style="float:left;" ><input type="checkbox" id="secondsubque13" onclick="secondsubque2Chk();secondsubque2Unchk()"/>Third party framework used</li><br /> <ul style="list-style:none;" id="secondsubque111"> <li style="float:left;">pages&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="pages" style="float:left;" /></li> </ul> </ul> </li><br /><br /><br /><br /><br /> <li style="float:left;"><input type="checkbox" id="secondsubque2" onclick="allChecked();"/></li><li style="float:left;">Cloud hosted</li> </ul> </td> </tr> <tr> <td style="padding :0;"><input type="checkbox" name="que3" id="ques3" onclick="thirdque();thirdqueUnchk();allChecked()" /></td> <td class="style10" style="padding:0;">Cloud</td></tr> <tr id="third"> <td style="padding:0;"></td> <td style="padding-bottom:0; padding-top:0;"> <table width="195%" height="118"> <tr><td width="53%" style="padding:0;">Cloud Apps</td> <td width="47%" style="padding:0;"><input type="text" size="30" placeholder="number of Cloud Apps to be tested" /></td></tr> <tr><td style="padding:0;">language</td><td style="padding:0;"><select style="width:70%;height:22px;"> <option>-------select-------</option> <option value="">php</option> <option value="">Dot Net</option></select></td></tr> <tr><td style="padding:0;">Browser</td><td style="padding:0;"><select style="width: 70%;height: 22px;"> <option>------select------</option> <option value="">php</option> <option value="">Dot Net</option></select></td></tr> <tr><td style="padding:0;"> Database</td><td style="padding:0;"><select style="width: 70%;height: 22px;"> <option>------select------</option> <option value="">php</option> <option value="">Dot Net</option></select></td></tr></table> <ul style="list-style:none;"> <li style="float:left;" id="thirdsubque1"><input type="checkbox" id="thirdsubque11" onclick="thirdsubque1();thirdsubque1Unchk();allChecked()" /></li> <li style="float:left;">Amazon Cloud Hosting<br /><br /> <ul style="list-style:none;" id="thirdsubque2"> <li style="float:left;" id="thirdsubque22"><input type="checkbox" id="thirdsubque222" onclick="thirdsubque2();thirdsubque2Unchk();allChecked()"/></li><li style="float:left;" >framework used</li><br /> <ul style="list-style:none;float:left;" id="thirdsubque2222"> <li style="float:left;">pages&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> <li style="float:left;"><input type="text" name="pages2" placeholder="Number of pages" /></li> </ul> </ul> </li><br /><br /><br /><br /> <li style="float:left;"><input type="checkbox" />Cloud Hosting</li><br /><br /> <li style="float:left;"><input type="checkbox" />Cloud Hosting</li><br /><br /> <li style="float:left;"><input type="checkbox" />Other cloud hosting&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li> <li style="float:left;"><input type="text" placeholder="Other cloud hosting" /></li> </ul></td> </tr> <tr> <td style="padding:0;"><input type="checkbox" name="que4" id="ques4" onclick="fourthque();fourthqueUnchk();allChecked()" /></td><td class="style10" style="padding:0;">Mobile</td> </tr> <tr id="fourthsubque1"> <td style="padding:0;"></td> <td> <table> <tr> <td><input type="checkbox" name="select" id="fourthsubque11" onclick="fourthque();fourthsubque11();allChecked() " />Android App</td></tr> <tr> <td></td> <td> <table width="289" id="fourthsubque111"> <tr><td width="250"><input type="checkbox" />Calls</td></tr> <tr><td><input type="checkbox" />Uses</td></tr> <tr><td><input type="checkbox" />Performs</td></tr> </table> </td> </tr> </table> </td> </tr> <tr id="fourthsubque2"> <td style="padding:0;"></td> <td style="padding:0;"><input type="checkbox" name="select" id="external" onclick="fifthque()" />iOS App</td> </tr> </table> <input type="submit" value="submit" /> </form> </body> </html> 

Answer 1

我認為如果你開始學習如何調試Javascript代碼將是明智的，你可以從下面的鏈接開始：

http://www.w3schools.com/js/js_debugging.asp

我希望它可以提供幫助。