Javascript验证错误，无法提交表单答案

【问题标题】：Javascript Validation error, can't submit the formJavascript验证错误，无法提交表单
【发布时间】：2015-10-14 11:19:14
【问题描述】：

我正在做这个项目，我在 HTML 中制作了一个注册表单，并通过 javascript“简单地”验证了它。 “简单”是指我只是确保输入字段不为空。现在，有什么问题？一切正常，直到有人从大学列表（id=cname）中选择“其他”选项，并且会出现一个新的输入框（id=cname1）。现在，如果有人将输入框留空，它会返回一个警告说“学院名称不能为空！”，但随后他无法点击提交按钮。我仔细检查了语法，一切似乎都很好。这是我的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>
	<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>

谢谢

【问题讨论】：

看起来您的代码 sn-p 缺少 html
您是否尝试过使用调试器？也许Chrome dev tools？
有大量代码不是实际问题的一部分。你能用有问题的输入和基本的javascript来做一个测试用例吗？该问题似乎是由其他 javascript 引起的，但代码有点难以追踪。其次，Javascript 验证必不可少意味着没有验证。用户可以通过脚本阻止程序无意中绕过它们。您将不得不为错误输入漏掉的奇怪情况编写代码，因此首先通过服务器端代码执行此操作，并通过 JS 添加快速且简约的检查以减少服务器命中。
@Nelson 你是对的，我知道用户甚至可以通过按一次空格键来绕过它，但这是一个预算紧张的项目，客户可以接受。更新：将代码限制为仅 HTML
我敢打赌，“客户对此表示满意”的意思是“客户希望您在它严重损坏时修复它”。客户对此不满意，因为他不知道这意味着什么。他对数据库崩溃并丢失所有数据感到满意吗？不？那他就不好了。

标签： javascript validation

【解决方案1】：

问题是您没有将 if 语句括在大括号中。

冒犯的sn-p：

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 时始终包含大括号是一种最佳做法。

【讨论】：

不错的收获。自己很难找到这些问题，因为在精神上你以为你戴上了牙套...... :)
谢谢@jacobangel :) 正如尼尔森所说，我没想到会出现这个错误。抱歉，尼尔森，你是对的 :) PS：客户还没有注意到这一点 :)