一、说明
问题:使用jquery Validate remote验证表单导致表单数据重复提交
网上解决表单重复提交的方式各式各样,点开一看js,html代码一大坨。于是自己研究了一下。只需要写一个方法就行了。直接贴代码。我这里是某个分类的唯一性验证。
二、代码
1.自定义的方法。
jQuery.validator.addMethod("checkName", function(value, element) { //用jquery ajax的方法验证电话是不是已存在 var flag = false; $.ajax({ type:"POST", url:'/goodsCategory/checkName', async:false, //同步 data:{"isUpdate":0,"level":1,"name":value}, success: function(data){ flag = data; } }); return flag; }, "");
2.表单提交
function validateUserForm() { $('#form').validate({ errorElement : 'div', errorClass : 'help-block', focusInvalid : false, ignore : "", rules : { name : { required : true, checkName : true, }, orderby : { required : true, digits : true }, }, messages : { name : { required : "该字段不能为空", checkName : "该类型已存在", }, orderby : { required : "该字段不能为空", digits : "该字段只能为数字" }, }, highlight : function(e) { $(e).closest('.form-group').removeClass('has-info').addClass('has-error'); }, success : function(e) { $(e).closest('.form-group').removeClass('has-error').addClass('has-success'); $(e).remove(); }, errorPlacement : function(error, element) { if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) { var controls = element.closest('div[class*="col-"]'); if(controls.find(':checkbox,:radio').length > 1) controls.append(error); else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0)); } else if(element.is('.select2')) { error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)')); } else if(element.is('.chosen-select')) { error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)')); } else error.insertAfter(element.parent()); }, submitHandler : function(form) { $.ajax({ url:"/goodsCategory/add", data:$('#form').serialize(), type:'post', async:false, dataType:'json', success:function (data) { if(data.success){ layer.msg('添加成功',{icon:6}); loadPage('/goodsCategory/listUI'); }else{ layer.msg('添加失败,请刷新后重试...',{icon:5}); } } }); } }); }
三、注意点
1.自定义验证方法和提交表单都是用的ajax方式,并且都是同步(即async为false),当然你如果用普通的提交方式就更不会出现重复提交的问题了。
四、总结
网上的很多解决方式不一定是最好的解决方式,自己想一想,试一试,说不定你的方法更简单实用。