案例
今天有一个需求就是点击按钮时,使用ajax方式提交表单,而且不是直接用form表单下的submit按钮提交,表单中用的校验是dwz 自带的校验方式,表单模板如下:
<li><div class="data_detail"> <span class="data_name">办公电话:</span> <div class="data_info"> <input type="text" htitle="办公电话" class="required digits" maxlength="12" name="creditcardCustomerJob.tel" value="${creditcardCustomerJob.tel}" /> </div> </div></li>
ajax调用方式如下:
//提交表单 $.ajax({ type: $form .method || 'POST', url:$form.attr("action"), data:$form.serializeArray(), dataType:"json", cache: false, success: function(data, textStatus) { result.msg = data.message; result.flag = true; return result; }, error: function(data, textStatus, errorThrown) { result.msg = data.message; result.flag = false; return result; } });
发现使用ajax提交方式,并不会调用表单中的校验(class="required digits"),而是直接提交了
解决方案
使用Jquery 插件中的valid方法,在js中使用$fom.valid()方式就可以在ajax方式调用form表单中配置的校验方法了
Jquery 插件中的valid插件
// http://docs.jquery.com/Plugins/Validation/valid valid: function() { if ( $(this[0]).is('form')) { return this.validate().form(); } else { var valid = true; var validator = $(this[0].form).validate(); this.each(function() { valid &= validator.element(this); }); return valid; } }
例子:
function submitPersonalInfo(type) { var result = new Object(); var $form = _$("#personal_info_form"); if (!$form.valid()) { result.flag = false; return result; } //提交表单 $.ajax({ type: $form .method || 'POST', url:$form.attr("action"), data:$form.serializeArray(), dataType:"json", cache: false, success: function(data, textStatus) { result.msg = data.message; result.flag = true; return result; }, error: function(data, textStatus, errorThrown) { result.msg = data.message; result.flag = false; return result; } }); return result; }
Jquery validate插件源码
$.extend($.fn, { // http://docs.jquery.com/Plugins/Validation/validate validate: function( options ) { // if nothing is selected, return nothing; can't chain anyway if (!this.length) { options && options.debug && window.console && console.warn( "nothing selected, can't validate, returning nothing" ); return; } // check if a validator for this form was already created var validator = $.data(this[0], 'validator'); if ( validator ) { return validator; } validator = new $.validator( options, this[0] ); $.data(this[0], 'validator', validator); return validator; }, // http://docs.jquery.com/Plugins/Validation/valid valid: function() { if ( $(this[0]).is('form')) { return this.validate().form(); } else { var valid = true; var validator = $(this[0].form).validate(); this.each(function() { valid &= validator.element(this); }); return valid; } }, // attributes: space seperated list of attributes to retrieve and remove removeAttrs: function(attributes) { var result = {}, $element = this; $.each(attributes.split(/s/), function(index, value) { result[value] = $element.attr(value); $element.removeAttr(value); }); return result; }, // http://docs.jquery.com/Plugins/Validation/rules rules: function(command, argument) { var element = this[0]; if (command) { var settings = $.data(element.form, 'validator').settings; var staticRules = settings.rules; var existingRules = $.validator.staticRules(element); switch(command) { case "add": $.extend(existingRules, $.validator.normalizeRule(argument)); staticRules[element.name] = existingRules; if (argument.messages) settings.messages[element.name] = $.extend( settings.messages[element.name], argument.messages ); break; case "remove": if (!argument) { delete staticRules[element.name]; return existingRules; } var filtered = {}; $.each(argument.split(/s/), function(index, method) { filtered[method] = existingRules[method]; delete existingRules[method]; }); return filtered; } } var data = $.validator.normalizeRules( $.extend( {}, $.validator.metadataRules(element), $.validator.classRules(element), $.validator.attributeRules(element), $.validator.staticRules(element) ), element); // make sure required is at front if (data.required) { var param = data.required; delete data.required; data = $.extend({required: param}, data); } return data; } });