Javascript验证错误，无法提交表格

我正在做这个项目，我在HTML中做了一个注册表单，并通过javascript'简单'验证它。通过'简单'我的意思是我只是确保输入字段不是空的。现在，这有什么问题？一切工作正常，直到有人从大学列表（id = cname）中选择“others”选项，并且会出现一个新的输入框（其中id = cname1）。现在，如果有人将输入框留空，它将返回一个警告，提示“大学名称不能为空！”，但他无法点击提交按钮。我仔细检查了语法，一切似乎都很好。这里是我的javascript代码：Javascript验证错误，无法提交表格

  function validate(){ 
 
       var name=document.getElementById("name").value; 
 
       if(name===""){ 
 
         document.getElementById("ename").innerHTML="Please Enter a Name"; 
 
         return false; 
 
       }else{ 
 
        var mail=document.getElementById("mail").value; 
 
        if(mail===""){ 
 
         document.getElementById("email").innerHTML="Please Enter an Email"; 
 
         return false; 
 
        }else{ 
 
        var num=document.getElementById("num").value; 
 
        if(num===""){ 
 
         document.getElementById("enum").innerHTML="Please Enter Phone number"; 
 
         return false; 
 
        }else{ 
 
         var batch=document.getElementById("batch").value; 
 
         if(batch===""){ 
 
          document.getElementById("ebatch").innerHTML="Please Enter a Batch"; 
 
          return false; 
 
         } 
 
         else{ 
 
          var cname=document.getElementById("cname").value; 
 
          if(cname===""){ 
 
          document.getElementById("ecname").innerHTML="Please Enter a College Name"; 
 
          return false; 
 
          }else if(cname==="others"){ 
 
           var cname1=document.getElementById("cname1").value; 
 
           if(cname1==="") 
 
            alert("College Name can't be empty"); 
 
           return false; 
 
          }else{ 
 
           var activity=document.getElementById("activity").value; 
 
           if(activity===""){ 
 
           document.getElementById("eactivity").innerHTML="Please Enter a Activity Name"; 
 
           return false; 
 
           }else{ 
 
            return true; 
 
           } 
 
          } 
 
         } 
 
        } 
 
       } 
 
      } 
 
     }

更新2：收缩编辑HTML

<tbody> 
 
      <tr> 
 
       <td>Name</td> 
 
       <td><input class="css-input" type="text" id="name" name="name" placeholder="Enter your name"></td> 
 
       <td><p id="ename"></p></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Email</td> 
 
       <td><input class="css-input" type="text" id="mail" name="mail" placeholder="Enter your Email Id"></td> 
 
       <td><p id="email"></p></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Phone</td> 
 
       <td><input class="css-input" type="tel" id="num" name="num" Placeholder="Phone Number"></td> 
 
       <td><p id="enum"></p></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Course</td> 
 
       <td> 
 
        <select class="css-input" name="course" id="course"> 
 
         <option value="mbbs" >MBBS</option> 
 
         <option value="bds" selected="selected" >BDS</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      
 
      <tr> 
 
       <td>Batch</td> 
 
       <td> 
 
        <select class="css-input" name="batch" id="batch" > 
 
         <option value="10">2010</option> 
 
         <option value="11">2011</option> 
 
         <option value="12">2012</option> 
 
         <option value="13">2013</option> 
 
         <option value="14">2014</option> 
 
         <option value="15">2015</option> 
 
        </select> 
 
       </td> 
 
       <td><p id="ebatch"></p></td> 
 
      </tr> 
 
      <tr> 
 
       <td>WorkShop</td> 
 
       <td id="first"> 
 
        <select class="css-input" name="workshop1"> 
 
         <option value="dentistry">Dentistry</option> 
 
         <option value="communicationsoftskill">Communication and Soft Skills</option> 
 
         <option value="research">Going about Research</option> 
 
         <option value="None">None</option> 
 
        </select> 
 
         
 
       </td><td id="third"> 
 
        <select class="css-input" name="workshop3"> 
 
         
 
         <option value="communicationsoftskill">Communication and Soft Skills</option> 
 
         <option value="research">Going about Research</option> 
 
         <option value="None">None</option> 
 
        </select> 
 
         
 
       </td> 
 
       <td class="second" id="second"> 
 
        <select class="css-input" name="workshop2"> 
 
         <option value="surgery">Surgical</option> 
 
         <option value="radiodiagnostic">Radiodiagnostics</option> 
 
         <option value="comandsoftskill">communication and soft skills</option> 
 
         <option value="emercriticalcare">emergency and critical care</option> 
 
         <option value="research">going about research</option> 
 
         <option value="None">None</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      
 
      <tr> 
 
       <td>College name</td> 
 
       <td> 
 
        <select class="css-input" name="cname" id="cname"> 
 
         <option value="PGIMS, Rohtak">PGIMS, Rohtak</option> 
 
         <option value="Swami Devi Dayal Dental College , Panchkula">Swami Devi Dayal Dental College , Panchkula</option> 
 
         <option value="BRS Instititute of Medical Sciences Dental College and Hospital , Sultanpur , Panchkula">BRS Instititute of Medical Sciences Dental College and Hospital , Sultanpur , Panchkula</option> 
 
         <option value="Kothiwal Dental and Research Centre , Moradabad">Kothiwal Dental and Research Centre , Moradabad</option> 
 
         <option value="Teerthankar Mahavir Dental College , Moradabad">Teerthankar Mahavir Dental College , Moradabad</option> 
 
         <option value="Teerthankar Mahavir Medical College and Research Center , Moradabad">Teerthankar Mahavir Medical College and Research Center , Moradabad</option> 
 
         <option value="ESIC , Faridabad">ESIC , Faridabad</option> 
 
         <option value="Maharishi Markandeshwar College of Dental Sciences , Mullana , Ambala">Maharishi Markandeshwar College of Dental Sciences , Mullana , Ambala</option> 
 
         <option value="JN Kapoor DAV Centenary Dental College and Hospital , Yamunanagar">JN Kapoor DAV Centenary Dental College and Hospital , Yamunanagar</option> 
 
         <option value="Jan Nayak Ch. Devi Lal Dental College , Sirsa">Jan Nayak Ch. Devi Lal Dental College , Sirsa</option> 
 
         <option value="Manav Rachna Dental College , Faridabad">Manav Rachna Dental College , Faridabad</option> 
 
         <option value="SGT Dental College , Gurgaon">SGT Dental College , Gurgaon</option> 
 
         <option value="PDM Dental College and Research Institute , Bahadurgarh">PDM Dental College and Research Institute , Bahadurgarh</option> 
 
         <option value="Sudha Rustagi College of Dental Sciences And Research , Faridabad">Sudha Rustagi College of Dental Sciences And Research , Faridabad</option> 
 
         <option value="Dr. Harvansh Singh Gudge Institute of Dental Sciences and Hospital , Chandigarh">Dr. Harvansh Singh Gudge Institute of Dental Sciences and Hospital , Chandigarh</option> 
 
         <option value="Swami Devi Dayal Hospital and Dental College, Barwala">Swami Devi Dayal Hospital and Dental College, Barwala</option> 
 
         <option value="Yamuna Institute of Dental Sciences And Research , Yamunanagar">Yamuna Institute of Dental Sciences And Research , Yamunanagar</option> 
 
         <option value="Lala Lajpat Rai Memorial Medical College , Meerut , Uttar Pradesh">Lala Lajpat Rai Memorial Medical College , Meerut , Uttar Pradesh</option> 
 
         <option value="Dayanand Medical College , Ludhiana">Dayanand Medical College , Ludhiana</option> 
 
         <option value="CMC , Ludhiana">CMC , Ludhiana</option> 
 
         <option value="GMC , Chandigarh">GMC , Chandigarh</option> 
 
         <option value="AFMC , Pune">AFMC , Pune</option> 
 
         <option value="ACMS , Delhi Cantt.">ACMS , Delhi Cantt.</option> 
 
         <option value="UCMS , New Delhi">UCMS , New Delhi</option> 
 
         <option value="VMMC , New Delhi">VMMC , New Delhi</option> 
 
         <option value="Sawai Man Singh Medical College , Jaipur">Sawai Man Singh Medical College , Jaipur</option> 
 
         <option value="IGMC , Shimla ">IGMC , Shimla </option> 
 
         <option value="Gold Institute of Medical Sciences and Research , Ballabhgarh ">Gold Institute of Medical Sciences and Research , Ballabhgarh </option> 
 
         <option value="28. Maharshi Markandeshwar Institute of Medical Sciences and Research , Mullana , Ambala">Maharshi Markandeshwar Institute of Medical Sciences and Research , Mullana , Ambala</option> 
 
         <option value="SGT Medical College , Budhera , Gurgaon">SGT Medical College , Budhera , Gurgaon</option> 
 
         <option value="Maharaja Agarsen Medical College , Agroha , Hisar">Maharaja Agarsen Medical College , Agroha , Hisar</option> 
 
         <option value="Shaheed Hasan Khan Mewati GMC , Mewat ">Shaheed Hasan Khan Mewati GMC , Mewat </option> 
 
         <option value="BPS GMC for women , Khanpur">BPS GMC for women , Khanpur32. BPS GMC for women , Khanpur</option> 
 
         <option value="GMC , Patiala ">GMC , Patiala </option> 
 
         <option value="others">others</option> 
 
        </select> 
 
       </td> 
 
       <td><input class="css-input" type="text" name="cname1" id="cname1" placeholder="enter Your college name"></td> 
 
\t <input type="hidden" value="1" id="flg" name="flg"> 
 
       <td><p id="ecname"></p></td> 
 
      </tr> 
 
      
 
      <tr> 
 
       <td>Accomodation</td> 
 
       <td> 
 
        <select class="css-input" id="accom" name="accom"> 
 
         <option value="yes" selected="selected">YES</option> 
 
         <option value="no">NO</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><input class="css-input" type="reset"></td> 
 
       <td><input style="cursor: pointer;" class="css-input" type="submit" ></td> 
 
      </tr> 
 
     </tbody>

感谢

来源

2015-10-14 Vivek

看起来像你的代码段缺少html –

你试过使用调试器吗？也许[Chrome开发工具]（https://developer.chrome.com/devtools）？ –

有大量的代码不是实际问题的一部分。你可以用只有输入的问题做一个测试用例，只有基本的JavaScript？这个问题似乎是由其他JavaScript引起的，但代码有点难以追查。二，Javascript验证必不可少意味着不验证。用户可以通过脚本拦截器无意中绕过它们，而不是。你将不得不编写一些奇怪的情况来处理糟糕的输入，所以首先通过服务器端代码来实现，然后通过JS添加快速和简约的检查来减少服务器命中。 – Nelson

问题是你没有把你的if语句包装在大括号中。

有问题的片段：

var cname1=document.getElementById("cname1").value; 
if(cname1==="") 
    alert("College Name can't be empty"); 
return false;

这是相同的文字：

var cname1=document.getElementById("cname1").value; 
if(cname1==="") { 
    alert("College Name can't be empty"); 
} 
return false;

这意味着你将总是返回false，一旦你得到这个值。这将始终阻止提交表单提供用户得到这一点。

修复的方法是直截了当：

var cname1=document.getElementById("cname1").value; 
if(cname1==="") { 
    alert("College Name can't be empty"); 
    return false; 
}

出于这个原因，许多人认为它最佳实践编写JavaScript时，始终包括括号。

来源

2015-10-14 03:17:07 jacobangel

好的。自己很难找到这些问题，因为在思想上你认为你把它放在了大括号中...... :) – Nelson

谢谢@jacobangel :)我并没有期待这个错误，因为尼尔森说。对不起尼尔森，你是对的:) PS：客户端还没有注意到这一点:) – Vivek

Javascript验证错误，无法提交表格

回答

相关问题