form onSubmit返回false不起作用

前言

Form onSubmit 有的时候使用 onSubmit 会出现没触发、或者触发了返回不起作用的情况。

onSubmit 没触发解决方案

οnsubmit="vaild()"
1

大部分情况都是少了 return ，正例

οnsubmit="return vaild()"
1

注意： 返回 flase 指不提交，true 提交

案例：

html

<form id="listForm" action="feno_report.jhtml" method="get" onsubmit="return vaild()">
1

script

<script>
  function vaild() {
		    var time = document.getElementById("filter_startTime").value;
		    startTime = new Date(time.replace(/-/g, '/'))
		    // 当前时间
            var currentTime = new Date();
            if (startTime.getTime() >= currentTime.getTime()) {
                return false;
            };
            var t1 = currentTime.getTime();
            var t2 = startTime.getTime();
            var dateTime = 1000 * 60 * 60 * 24;
            var minusDays = Math.floor((t1 - t2) / dateTime);
            if ( (${setFindLimitTime} * 30) <  minusDays ) {
                layer.msg('已超过账号时间限制'+${setFindLimitTime}+'个月');
                return false;
            } else {
                return true;
            }
            return false;
		}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

onSubmit 触发了，返回失效

问题

jquery validate与onsubmit 两种校验冲突了，会导致 onsubmit 会失效。

测试

jquery validate 也是在 submit 的时候开始判断的，并且在 onsubmit 事件之后，所以 onsubmit 返回false，只要满足 validate 的条件仍然会返回true，表单仍被提交。

方案

jquery validate 和 submit 只能留一个，我选了 jquery validate ，使用 validate 自定义校验。

jquery validate自定义校验

jq

<script src="./jquery-1.11.1.js" type="text/javascript" charset="utf-8">script>

<script src="./jquery.validate.js" type="text/javascript" charset="utf-8">script>

<script src="./messages_zh.js" type="text/javascript" charset="utf-8">script>
1
2
3
4
5
6

html

<form id="inputForm"  action="update.jhtml" method="post">
    <input type="text" name="username" class="form-control" maxlength="200" />
    <button class="btn btn-success" type="submit">保存内容button>
form>
1
2
3
4

<script>
     // 自定义校验 true 提交，false 返回1+1不等于2
     jQuery.validator.addMethod("user",function(value, element){
        var results = false;
        return results;
     },"1+1不等于2");
     $(document).ready(function () {
         $("#inputForm").validate({
                rules: {
					username:{
					   // 必填
				       required : true,
				       // 绑定自定义校验
				       user: true
				    }
                }
            });
        });
     })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20