学步园

之前曾用过jQuery validator做过一些项目，但是最近又重新拾起，发现功能上升级了，一些之前的使用方法已经在报错了，于是乎再重新整理一篇博客汇总一下最新的jQuery form validate 使用教程。

jQuery validate 使用方法

其中我们经常要用户表单提交事件，表单元素失去焦点后的验证事件，错误显示的方法，验证表单rules规则，验证表单rules规则对应的消息。

jQuery(document).ready(function ($) {
  $("#cf-order-checkout-form").validate({
    // custom handler to call named function "do_payment"
    submitHandler: function (form) {
      $(form).attr("target", "_blank");
      form.submit();
    },
    // validate the previously selected element when the user clicks out
    onfocusout: function (element) {
      $(element).valid();
    },

    errorPlacement: function (error, element) {
      if (element.attr('type') == 'radio') {
        error.appendTo(element.parent().parent());
      }
      else {
        error.appendTo(element.parent());
      }
    },

    // validation rules
    rules: {
      'address[province]': { required: true },
      'address[city]': { required: true },
      'address[county]': { required: true },
      'transaction[payment]': { required: true }
    },
    // validation messages
    messages: {
      'address[province]': {
        required: "请选择您的省份或自治区。"
      },
      'address[city]': {
        required: "请选择您的城市，地区或自治州。"
      },
      'address[county]': {
        required: "请选择您的区或县。"
      },
      'transaction[payment]': {
        required: "请选择一个支付方式。"
      }
    }
  });
});

其他使用方法请查看官方API函数。

jQuery validate submitHandler 导致死循环

防止表单提交死循环，应该用form.submit();而非$(form).submit();

submitHandler的form变量为dom，dom对象转换成jquery的对象，加上$()这个就行，然后就可以用jquery的语法来操作。

正确的使用提交表单方法：

submitHandler: function(form){
  form.submit();
}

这样就对了。

jQuery validate Ajax Submit

我们可以定义submitHandler函数中使用jQuery Ajax来请求处理。

$("#user-login").validate({
  // custom handler to call named function "do_payment"
  submitHandler: function (form) {
    $.ajax({
      type: "POST",
      url: '/ajax/user/login',
      data: {"name" : $(form).find('#edit-name').val(), "pass" : $(form).find('#edit-pass').val() },
      dataType: "json",
      success: function(data) {
        if (data.result) {
          location.reload();
        }
        else if(data.message) {
          alert(data.message);
        }
        else {
          alert('密码错误');
        }
      }
    });
  },
  // validate the previously selected element when the user clicks out
  onfocusout: function (element) {
    $(element).valid();
  },
  errorPlacement: function (error, element) {
    error.appendTo(element.parent());
  }
});

最后不得不感谢以下jQuery Validate插件作者。