目标: 我制作了一个包含 3 个字段的表单,我希望如果表单中只剩下一个空字段 表单,它被识别并打印一条错误消息(对于每个空字段)(不警告),并且取消表单提交。错误消息最初是隐藏的,只有当字段留空时才应使其可见。
问题: 停止提交的代码不起作用。 请发布任何错误。如果只使用alert(),并删除显示和删除隐藏的validaeFormOnSubmit()和validateEmpty()的代码,它就可以工作。
表格:
<form action="start.php" method="post" onsubmit="return validateFormOnSubmit(this)" >
<table>
<tbody>
<tr>
<td><label for="fname">Team Name:</label><br></td>
<td><input name="fname" type="text" autocomplete="off">  <div id="1"> Field is
required
</div></td>
</tr>
<tr>
<td><label for="contact">Contact 1 :</label> </td>
<td><input type="text" maxlength = "10" name="contact" >  <div id="2"> Field
is required </div></td>
</tr>
<tr>
<td><label for="contact2">Contact 2:</label> </td>
<td><input type="text" maxlength = "10" name="contact2" >  <div id="3"> Field is
required </div></td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" value="Send" type="submit" ></td>
<td> </td>
</tr>
</tbody>
</table>
</form>
脚本
<script >
$(document).ready(function () {
var i;
for(i=1;i<=3;i++)
{
var k='#'+i;
$(k).hide();}
});
function validateFormOnSubmit(theForm) {
var reason = "";
reason += validateEmpty(theForm.fname,1);
reason += validateEmpty(theForm.contact,2);
reason += validateEmpty(theForm.contact2,3);
if (reason != "") {
return false;
}
return true;
}
function validateEmpty(fld,k) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error = "error";
var k='#'+i;
$(k).show();
} else {
fld.style.background = 'White';
var k='#'+i;
$(k).hide();
}
return error;
}
</script>
最佳答案
我建议如下:
- 从 HTML 中删除
onsubmit="..."
以编程方式绑定(bind)到
onsubmit
事件:$(...).on("submit", validateFormOnSubmit);
相应地更改
validateFormOnSubmit
的签名:function validateFormOnSubmit(event) { // use this instead of theForm }
不要返回
false
而是event.preventDefault()
,即:if (reason != "") { event.preventDefault(); }
关于javascript - 使用 javascript 取消表单提交不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19095800/