jquery.validate.js不生效的原因

jquery.validate.js不生效的原因

1.js引用顺序问题
需要先引入jquery.js,再引入jquery.validate.js才会生效

 <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
 <script src="js/jquery.validate.js"></script>

2.js冲突
一个页面上引入了多个js文件,可能会有不同版本的js冲突问题
3.form表单问题
1)使用form的action提交表单,暂时还未出现过问题
2)使用ajax提交表单
需要使用input=submit,不能使用button或者其他标签,否则会造成验证不生效并且submitHandler也不执行的效果
代码示列
html部分:

<form  action="addUserAddress" method="post" id="newAddressForm">
	<div class="am-form-group">
		<label for="receiverName" class="am-form-label">收货人</label>
			<div class="am-form-content">
				<input type="text" id="receiverName" placeholder="收货人" name="receiverName"/>
			</div>
	</div>
	<div class="am-form-group">
		<label for="receiverPhone" class="am-form-label">手机号码</label>
		<div class="am-form-content">
			<input id="receiverPhone" placeholder="手机号必填" type="text" name="receiverPhone"/>
		</div>
	</div>
	<div class="am-form-group">
		<label for="user-address" class="am-form-label">所在地</label>
		<div class="am-form-content address" id ="user-address">
			<select data-am-selected id="receiverCity" name="receiverCity"/>
			</select>
			<select data-am-selected id="receiverDistrict" name="receiverDistrict"/>
			</select>
			<select data-am-selected id="receiverState" name="receiverState"/>
			</select>
		</div>
	</div>
	<div class="am-form-group">
		<label for="receiverAddress" class="am-form-label">详细地址</label>
		<div class="am-form-content">
			<textarea  rows="3" id="receiverAddress" placeholder="输入详细地址" name="receiverAddress"></textarea>
			<small>100字以内写出你的详细地址...</small>
		</div>
	</div>
	<div class="am-form-group">
		<div class="am-u-sm-9 am-u-sm-push-3">
			<input type="submit" class="am-btn am-btn-danger save" value="保存">
			<a href="javascript: void(0)" class="am-close am-btn am-btn-danger">取消</a>
		</div>
	</div>
</form>

/***
 * jquery.validate.js添加电话号码校验
 */
$(function () {
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写手机号码");
})
/*添加新地址*/
$(".save").on("click",function(){
    var addressId = $("input[name='addressId']").val();
    //校验添加的地址内容
    $("#newAddressForm").validate({
        //一失去焦点就校验
        onfocusout: function (element) {
            $(element).valid();
        },
        errorClass: "red",
        rules: {
            receiverName: {
                required:true
            },
            receiverPhone: {
                required:true,
                isMobile: true
            },
            receiverCity:{
                required:true
            },
            receiverDistrict:{
                required:true
            },
            receiverState:{
                required:true
            },
            receiverAddress:{
                required:true
            }
        },
        messages: {
            receiverName: "请输入收货人姓名",
            receiverPhone: {
                required: "请输入收货手机号"
            },
            receiverCity: {
                required: "请选择收货省份"
            },
            receiverDistrict: {
                required: "请选择收货区域"
            },
            receiverState:{
                required: "请选择收货城市"
            },
            receiverAddress:{
                required: "请输入详细地址"
            }
        },
        submitHandler:function() {
            $.ajax({
                type: 'post',
                url: 'addUserAddress',
                data: $("#newAddressForm").serialize(),
                dataType: "json",
                success: function (data) {
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        if (data.code == 200) {
                            layer.msg(data.message, {icon: 1}, 1000);
                            //刷新页面*/
                            setTimeout(function () {
                                //修改不执行刷新页面操作
                                window.location.href="toEditAddress";
                                if(addressId != undefined){
                                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    parent.layer.close(index); //再执行关闭
                                }

                            },1000);
                        } else {
                            layer.msg(data.message, {icon: 2}, 1000);
                        }
                    });
                },
                beforeSend: function(xhr){
                    xhr.setRequestHeader(header, token);
                },
                error: function(){
                    alert("内部错误");
                }
            });
        }
    });