以前在项目中为一个表单(from)编写onsubmit()脚本的时候,经常需要验证表单中数据的合法性,所以常会写道:<form action="/admin/addUser.do" method="post" onsubmit="validateForm();">,试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单 还是会提交。后来发现 onsubmit="return validateForm()"就没有问题了。
今天在调试项目的bug时,遇到了表单提交前验证的问题,用一个普通的button按钮代替submit按钮,
在提交前触发这个button的onclick事件,在其事件中触发form的submit事件。问题出现了,以下是程序代码:
<input type="button" name="save" value="保存" onclick="saveProject();"/>
saveProject()方法如下:
function saveProject(){
var matCategory = document.getElementsByName("matCategory");
var flag = false;
for(i=0;i<matCategory.length;i++){
var checkbox = matCategory[i];
if(checkbox.checked == true){
flag = true;break;
}
}
if(flag){
proForm.submit();
return;
}
alert("请选择产品分类!");
}
却发现并没有触发form的onsubmit方法,而是直接提交了。奇怪了,难道没有这种方式无法结合form的onsubmit方法吗?后来通过百度和google将saveProject方法改为如下:在表单提交前做了一下验证
function saveProject(){
var matCategory = document.getElementsByName("matCategory");
var flag = false;
for(i=0;i<matCategory.length;i++){
var checkbox = matCategory[i];
if(checkbox.checked == true){
flag = true;break;
}
}
if(flag){
if(document.proForm.onsubmit() == true){
proForm.submit();
}
return;
}
alert("请选择产品分类!");
}
这个问题耗费了我半个小时,因此记下来希望下次不再犯错,不得不说细节决定成功与否!
转载于:https://blog.51cto.com/tscfengkui/633226