JS表单验证是不工作的html表单
JS Form validation is not working For html form
我有一个简单的HTML表单。格式如下-
<table>
<form method="post" action="insert.php" name="idea_1" id="idea_1" onsubmit="return idea_1_check();" >
<input type="hidden" name="type" value="idea" />
<tr><td></td><td><br><h3 style="color:#990066; font-weight:bold;">First Member (Team Leader)</h3><br></td></tr>
<tr><td></td><td><input type="text" name="stu_name_1" value="" placeholder="Your Full Name"></td></tr>
<input type="text" name="school_name_1" value="" placeholder="Your School Name"></td></tr>
<tr><td></td><td><input type="text" name="stu_id_1" value="" placeholder="Your Student ID/Roll"></td></tr>
<tr><td></td><td>
<select name="class_1" id="class" required >
<option selected="selected" value="">Please Select Your Class</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
<option value="Nine">Nine</option>
<option value="Ten">Ten</option>
</select>
</td></tr>
</td><td>
<select name="division_1" id="division" required>
<option selected="selected" value="">Please Select Your Division</option>
<option value="Dhaka">Dhaka</option>
<option value="Chittagong">Chittagong</option>
<option value="Sylhet">Sylhet</option>
</select>
</td></tr>
<tr><td></td><td><input type="text" name="mobile_1" value="" placeholder="Your Parent's Mobile" required id="phone" ></td></tr>
<tr><td></td><td><input type="text" name="interest_1" value="" placeholder="Your Interest e.g.: Robotics, Physics, Chemistry, Biology "></td></tr>
<tr><td></td><td><textarea name="address_1" required id="must"="required id="must"" placeholder="Your Full Residential Address"></textarea></td></tr>
<tr><td></td><td><input type="text" name="email_1" value="" placeholder="Your Email Address" id="email_1" ><img id="tick_1" src="tick.png" width="16" height="16"/>
<img id="cross_1" src="cross.png" width="16" height="16"/></td></tr>
</table>
<br>
<p class="submit"><input type="submit" name="commit" value="Register" ></p><br>
<label>
<div align="center"><a href="http://ignite-bd.com/submit-concept-paper/" target="_blank"><strong>Upload your Concept Paper within 3 weeks (21 Days) to qualify for the divisional round</strong> </a>
</div>
</label>
<br><br>
</form>
, javascript验证函数如下:
function idea_1_check()
{
var stu_name=document.forms["idea_1"]["stu_name_1"].value;
var school=document.forms["idea_1"]["school_name_1"].value;
var id=document.forms["idea_1"]["stu_id_1"].value;
var mob=document.forms["idea_1"]["mobile_1"].value;
var add=document.forms["idea_1"]["address_1"].value;
var email=document.forms["idea_1"]["email_1"].value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if (stu_name==null || stu_name=="" || stu_name.length<6)
{
alert("Please provide Your full name");
return false;
}
if (school==null || school=="" || school.length<6)
{
alert("Please provide Your full School name");
return false;
}
if (id==null || id=="" || id.length<1)
{
alert("Please provide Your Roll/ID");
return false;
}
if (add=null || add=="" || add.length<10)
{
alert("Please provide Your full Residential Address");
return false;
}
else if (email==null || email=="")
{
alert("Email must be filled out.");
return false;
}
else if (atpos <1 || dotpos <atpos+2 || dotpos + 2 >= email.length)
{
alert("Not a valid e-mail address");
return false;
}
}
一切看起来都很好。但是验证不起作用。相同的代码与另一个类似的工作。那么我的代码有什么问题?
只需在验证函数的末尾添加return true
,这样如果没有验证错误,表单将提交
您的验证对我有效。一开始,虽然我必须填写下拉框,父母的手机号码和地址,因为html验证是在javascript验证之前先运行的。
我必须首先填写的这些字段(在输入您的全名警告弹出之前)都具有所需的属性。
检查工作代码如下:
<table>
<form method="post" action="insert.php" name="idea_1" id="idea_1"
onsubmit="return idea_1_check();">
<input type="hidden" name="type" value="idea" />
<tr>
<td></td>
<td><br>
<h3 style="color: #990066; font-weight: bold;">First Member
(Team Leader)</h3>
<br></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="stu_name_1" value=""
placeholder="Your Full Name" required="required"></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="school_name_1" value=""
placeholder="Your School Name" required="required"></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="stu_id_1" value=""
placeholder="Your Student ID/Roll" required="required"></td>
</tr>
<tr>
<td></td>
<td><select name="class_1" id="class" required="required" >
<option selected="selected" value="">Please Select Your
Class</option>
<option value="Six">Six</option>
<option value="Seven">Seven</option>
<option value="Eight">Eight</option>
<option value="Nine">Nine</option>
<option value="Ten">Ten</option>
</select></td>
</tr>
<tr>
<td></td>
<td><select name="division_1" id="division" required="required">
<option selected="selected" value="">Please Select Your
Division</option>
<option value="Dhaka">Dhaka</option>
<option value="Chittagong">Chittagong</option>
<option value="Sylhet">Sylhet</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="mobile_1" value=""
placeholder="Your Parent's Mobile" required="required" id="phone"></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="interest_1" value=""
placeholder="Your Interest e.g.: Robotics, Physics, Chemistry, Biology " required="required"></td>
</tr>
<tr>
<td></td>
<td><textarea name="address_1" id="must" required="required"
placeholder="Your Full Residential Address"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="text" name="email_1" value=""
placeholder="Your Email Address" id="email_1" required="required"><img
id="tick_1" src="tick.png" width="16" height="16" /> <img
id="cross_1" src="cross.png" width="16" height="16" /></td>
</tr>
</table>
<br>
<p class="submit">
<input type="submit" name="commit" onclick="return idea_1_check();" value="Register">
</p>
<br>
<label>
<div align="center">
<a href="http://ignite-bd.com/submit-concept-paper/" target="_blank"><strong>Upload
your Concept Paper within 3 weeks (21 Days) to qualify for the
divisional round</strong> </a>
</div>
</label>
<br>
<br>
</form>
</table>
这是工作副本的链接:http://jsfiddle.net/CU9gP/1/
相关文章:
- 使用 AngularJS Http Post 将表单 html 中的数据发布到服务器
- 如何使用js框架验证Laravel 4表单(html)
- 在表单html上编程php和警告javascript
- 联系表单-Html和Javascript只包含在Html(tumblr)中
- javascript表单(html网页)名称字段的验证
- Javascript多维数组表单html列表
- 单选按钮上的无提示验证被忽略,而它只适用于相同表单html中的文本字段
- 从表单html中检索数据
- 刷新页面后是否可以保留表单(html)内容数据
- 部分表单HTML未加载
- 控制器和输入表单html使用var Javascript
- 获取表单html及其值
- 如何使表单(html、jsp)中的Textfield只接受dd/mm/yyyy格式,而无需单击提交按钮
- 提交隐藏的表单HTML
- 信用卡表单html值长度
- PHP表单HTML按钮
- 简单的方式来改变输入字段的视觉顺序动态(不改变表单HTML)
- 表单HTML没有更新
- 制作一个不序列化javascript的一对多表单html
- 搜索parse.com数据表单html输入