Dwz/Jquery--使用Ajax提交表单时调用表单设置的校验

案例

今天有一个需求就是点击按钮时，使用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;
	}
});