jQuery.validate common methods and issues that need attention_jquery

1. Use other methods to replace the default SUBMIT

Copy the code The code is as follows:

$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("submitted");
form.submit ();
                                                   >

The code is as follows:

$(".selector").validate({ 
submitHandler: function(form)

{  $(form) .ajaxSubmit(); } }) can set the default value of validate, which is written as follows:

Copy code


The code is as follows:

$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit( ); }

});If you want to submit the form, you need to use form.submit() instead of $(form).submit() 2.debug, only verify but not submit the formIf this parameter is true, the form will not be submitted, only checked, which is very convenient for debugging

Copy the code

The code is as follows:

$().ready(function() {
$("#signupForm").validate({

debug:true });});If there are multiple forms on a page that you want to set as debug, use

Copy code


The code is as follows:

$.validator.setDefaults({
debug: true

})3.ignore: Ignore certain elements and do not verify ignore: ".ignore"4. Change the position where the error message is displayederrorPlacement: Callback

Default: Put the error message after the verified element
Indicate the location of the error placement. The default is: error.appendTo(element.parent()); that is, put the error message after the verified element
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

//Example:

Copy code


The code is as follows:

    First Name
   
   


   
       
        14/02/07
   
   
       
        02/14/07
   
   


     
   
       

           
            I have read and accept the Terms of Use.
       

   

errorPlacement: function(error, element) {
    if ( element.is(":radio") )
        error.appendTo( element.parent().next().next() );
    else if ( element.is(":checkbox") )
        error.appendTo ( element.next() );
    else
        error.appendTo( element.parent().next() );
}

代码的作用是：一般情况下把错误信息显示在中，如果是radio显示在中，如果是 checkbox显示在内容的后面

errorClass：String  Default: "error"
指定错误提示的css类名，可以自定义错误提示的样式

errorElement：String  Default: "label"
用什么标签标记错误，默认的是label你可以改成em

errorContainer：Selector
显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏，用处不大
errorContainer: "#messageBox1, #messageBox2"

errorLabelContainer：Selector
把错误信息统一放在一个容器里面。

wrapper：String
用什么标签再把上边的errorELement包起来

一般这三个属性同时使用，实现在一个容器内显示所有错误提示的功能，并且没有信息时自动隐藏

errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"

5更改错误信息显示的样式
设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个validation.css专门用于维护校验文件的样式

复制代码 代码如下:

input.error { border: 1px solid red; }
label.error {
  background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

6每个字段验证通过执行函数
success：String,Callback
要验证的元素通过验证后的动作，如果跟一个字符串，会当做一个css类，也可跟一个函数

复制代码 代码如下:

success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
//label.addClass( "valid").text("Ok!")
}

Add "valid" to the validation element, with the style defined in CSS