Javascript验证错误，无法提交表单
Javascript Validation error, can't submit the form
我正在做这个项目，我在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>谢谢
问题是你没有把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;
}
相关文章：
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型，然后提交表单
- 添加和删除隐藏字段数组中的值，而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单，并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单，但仍然允许回车工作
- 使用按钮和单选按钮提交表单，但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单，同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时，使用JavaScript提交表单
- 提交表单后，Watir文本框输入未持续(重置为以前的文本框输入）
