Jquery validate error class

Есть множество статей о том, как написать свои правила для плагина jQuery validate, но мало какие из них объясняют внутреннюю работу этого плагина, что мы и обсудим в этой статье.
Это первая часть серии статей «Понимание ненавязчивой валидации Asp.NET MVC»

1. Работа плагина jQuery validate изнутри
2. Понимание Html-кода, сгенерированного ненавязчивой валидацией в ASP.Net MVC
3. Внутренняя работа плагина unobtrusive jQuery validate в ASP.Net MVC.

Что мы узнаем из этой статьи:
1. Как валидировать форму.
2. Сообщения валидации и как они работают.
3. Добавление собственных правил валидации.
4. Что именно происходит, когда мы вызываем метод валидации.

Как валидировать форму

Есть 2 основных способа, чтобы валидировать форму.

1. Использовать имена классов как правила

Как это работает

Мы добавляем к полю, которое нужно провалидировать, html атрибут «class», и это подключит валидацию.
Итак, если нам нужно, чтобы текстовое поле было обязательным мы добавляем в элемент input значение атрибута class = «required»

Html

<form action="/" method="post">
  <input id="Name" type="text" name="Name" value="" class ="required"  />
  <input type="submit" value="Submit" />
</form>

JavaScript

$(document).ready(function() {
  $('form').validate();
});

Так вы можете добавить к определенным классам несколько правил.

Плюсы и минусы такого подхода:
Работает только с правилами, которые не принимают аргументов.
Мы используем html атрибут «class» для того, для чего он не предназначен.
Но его легко установить.

Использование метода «addClassRules»

Использование функции «addClassRules» дает нам возможность использовать составное правило для одного класса.

JavaScript

 $.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

Этот код добавляет 2 новых правила для класса «name» и «zip», и, если у нас есть элемент «input», у которого класс «zip», то к нему применяются правила: его значение является обязательным, пользователь может вводить только цифры и длина должна быть точно 5 символов.

Html

<input class="zip" type="text" name="zipCode" />

Информация: Чтобы использовать собственное сообщение для определенного правила requires в составном правиле, нам нужно придумать псевдоним для правила «required», создать новое правило с этим псевдонимом и установить для него сообщение по умолчанию.

JavaScript

$.validator.addMethod("newrequired", $.validator.methods.required, "new name is required");

Или мы можем использовать html атрибут «title», его значение будет сообщением об ошибке для составного правила.

Заметка: Валидация по имени класса работает только для правил валидации, не принимающих никаких аргументов.

2. Добавление правил как JSON объекта к методу validate()

По названию, вы должны были догадаться, что этот метод валидации принимает объект json, поэтому мы можем определить поля, которые нам нужно валидировать и правила валидации для них.

Html

<form>
  <input id="something" type="text" name="userEmail" />
  <input id="submit" type="submit" value="submit" />
</form>

JavaScript

$('form').validate({
  rules: {
    userEmail: {
      email: true,
      required: true
    }
  }
});

Заметка: Когда мы передаем объект «rules» функции «validate» ключом должно быть значение атрибута «name», а не значение «id». Как можно увидеть в примере: ключ -это «userEmail», значение атрибута «name», а у атрибута «id» другое значение.

Плюсы и минусы этого подхода:

Этот подход дает нам возможность использовать больше правил валидации, которые принимают аргументы, такие как minlength, remote, equalTo и т.д.
Отличный и настраиваемый вручную контроль над всем.
Но пользователь должен делать отдельную функцию «validate» с разными опциями для каждой формы.

Добавление или удаление динамических правил.

Добавление правил

Чтобы добавить правило мы должны использовать метод «rules» для элементов jQuery после того как форма провалидирована и передавать как первый параметр строку «add» и как второй параметр — объект правил, которые мы хотим добавить к этому элементу (также мы можем передавать объект «сообщение» для правил, которые мы добавили).

JavaScript

$('.input').rules('add', {
  required: true,
  messages: {
    required: true
  }
})

Удаление правил

Если мы хотим удалить правило или набор правил, мы передаем строку «remove», как первый параметр для метода «rules», а вторым параметром будет строка, которая содержит правила, которые мы хотим удалить, отделенные пробелом.

JavaScript

$('.input').rules('remove', 'min max');

Подход настройки вручную

JavaScript

var validator = $('form').data('validator'); 
validator.settings.rules.objectName = {
  required: true
}

Этот подход очень полезен, если у вас есть созданные правила и объекты сообщений, вы можете расширить правила валидатора своими собственными:

JavaScript

$.extend(validator.settings, { rules: rules, messages: messages });

Сообщения валидации и как они работают

Есть три способа настроить сообщение валидации

1. Передать объект «messages» методу «validate». Объект «messages» состоит из пар ключзначение. Ключ — это значение атрибута «name» элемента. Значение — объект, содержащий каждое правило и его сообщение.

JavaScript

$('form').validate({
  rules: {
    userEmail: {
    email: true,
    required: true
    }
  },
  messages: {
    userEmail: {
    email: "Please enter your email",
    required: "*"
    }
  }
});

2. Определить значение атрибута «title» элемента

Html

<input id="Email" title="you have to enter a value" type="text" name="Email" />

3. Использовать сообщение по умолчанию. Когда определяется правило валидации, есть встроенные сообщения по умолчанию для встроенных правил.

Заметка: Эти три способа переопределяют друг друга, основываясь на приоритетности, самый приоритетный — переданный объект «messages», а наименее приоритетный — сообщение по умолчанию.

Добавление собственных правил валидации

Когда мы хотим добавить больше правил валидации, чем определены по умолчанию, мы используем метод
$.validator.addMethod

Этот метод принимает как параметры следующее:

• имя правила;
• функцию, которая осуществляет валидацию;
• сообщение по умолчанию.

Функция, которая производит валидацию, может быть с двумя или тремя параметрами

JavaScript

 function validationMethod (value, element)
// OR
function validationMethod (value, element, params)

Давайте объясню эти параметры.
Значение: значение DOM элемента, который будет валидироваться
Элемент: сам элемент DOM
Параметры: то, что мы передаем как значение. Для этого примера правила валидации — это то, чему должен равняться params.

JavaScript

$('form').validate({
  rules: {
    firstname: {
      compare: {
        type: "notequal",
        otherprop: "lastname"
      }
    }
  }
});  

в этом примере params будет равен {type:«notequal», otherprop: «lastname»}

Пример добавления собственного правила:

JavaScript

$.validator.addMethod("notnumbers", function(value, element) {
  return !/[0-9]*/.test(value);
},
"Please don't insert numbers.")

Что именно происходит, когда мы вызываем метод «validate»

Когда мы вызваем метод validate на форме, за кулисами происходит много разных вещей:

Создается объект «validator» со всеми правилами и опциями, присоединенными к форме.
Метод «validate» присоединяет «validator» используя «$.data». Мы можем получить его выбрав форму и вызвав функцию jQuery «$.data» и передать ее «validator». Объект «vaidator» — это все метаданные для валидации, которые дают нам возможность доступа к опциям валидации в любое время жизненного цикла страницы.
Используя этот объект, мы можем изменить во время выполнения опции, которые мы передали методу валидации, такие как добавление или удаление правил, изменение поведения, если поле валидное или невалидное, или даже введение селектора игнорирования.

JavaScript

 //getting the validator
var validator = $("selector").data("validator")

Заметка: Когда вы вызываете метод «validate» на форме, которая уже провалидирована, он вернет только объект «validator», используется также $.data, и все предыдущие опции, переданные методом «validate», будут стерты.

JavaScript

var validator = $(".selector").validate(/* rules will be omitted */)

Присоединение событий формы

Что произойдет, когда мы нажмем submit(отправить форму), и в форме будет введено неверное значение для поля, к которому мы присоединили валидацию. Если одно из полей невалидное, то плагин валидации будет присматриваться к нему более пристально, чтобы проверять, валидное оно или нет, по событиям на этом поле.
Сообытия формы, на которые подписывается плагин — это «click», «focusin», «focusout», «keyup», «submit».
Заметка: Вы можете отключить валидацию по определенным событиям, передав их как ключи в методе validate, и false в качестве значений.

JavaScript

$(".selector").validate({
    onfocusout: false,
     onkeyup: false,
     onclick: false,
     onsubmit: false
});

Перевод статьи Nadeem Khedr «How the jQuery validate plugin works internally». nadeemkhedr.wordpress.com/2012/08/12/how-the-jquery-validate-plugin-works-internally/#goCallValidate

update 01.06.13: добавлены ссылки на другие посты серии

Today I came with another jQuery article guys! Have you seen validations when you are trying to sign up or login to a site? Without submitting your data? This is the simplest way to do it. As you have seen in web sites, there are two types of validations basically. They are front end and back end. Front end means your input details are validated real time while you are typing and without a submission. As an example, think you have entered an email with an invalid format. When you are trying input next data, error message is shown for the previous invalid input on the frond end user interface. Back end means, your inputs are validated after a submission through a button click. It is not much user friendly because if a user has entered wrong inputs for several times, he or she will have to submit again and again and get the corrected data, to get registered in a site.

This jQuery plugin does the job for you. Real time front end validation is done through this plugin. Let’s see how to get the benefit of this plugin. Here I will use Codeigniter framework for PHP and Bootstrap framework for styling. This is a short demo of the application what will we build today. Watch it!

First create a project folder and put the codeigniter files into it. 

If you are not familiar with Codeigniter, this will be difficult. Refer my Codeigniter articles here to learn the framework.

As usual, a database is required for this. So, create a database called validation. You can give any name you want. So basic configurations are like this.

Project folder => jQueryForm

Base URL => $config[‘base_url’] = ‘http://localhost/jQueryForm/

Database name => validation 

Database table name => users

Autoload libraries => database

Autoload helpers => form , url

Default Controller => Register

Import the SQL file called validation.sql in my GitHub folder to get create the database.

We have to create the view file first. For that go into the applications/views folder and create a view called signup.php.

In this view we are going to link validation plugin through a JS file. Visit the below site to get the source file.

https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0

Or otherwise you can include the CDN

https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js

Include this JS file just before the ending body tag of the view as I have done below. Configuration is explained after this code.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Validation</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap CSS styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Roboto Google font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <!-- Google jQuery CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Custom CSS -->
    <style type="text/css">
        body {
            font-family: 'Roboto', sans-serif;
        }
        label {
            font-size: 16px;
        }
        .error {
            color: #a94442;
            border-color: #a94442;
            margin-top: 10px;
        }
        .panel {
            border: 1px solid;
            border-color: black;
        }
    </style>
</head>
<body>
   <div class="col-lg-12">
        <div class="col-lg-4"></div>
        <div class="col-lg-4">
            <h2 style="margin-top: 30px;text-align: center;">jQuery Form Validation</h2>
            <br>              
            <div class="panel panel-default">
                <div class="panel-heading">
                    <br>
                    <h3 class="panel-title text-center">Fill the form to sign up</h3>
                    <br>
                </div>
                <div class="panel-body">
                    <!-- success message to be displayed after adding a user to the database successfully -->
                    <?php if($this->session->flashdata('success')): ?>
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                                <?php echo $this->session->flashdata('success');?>
                        </div>
                    <?php endif; ?>
                    <!-- Form -->
                    <?php echo form_open('Register/signUp', array('id' => 'signup-form','method' => 'POST'));?>
                        <div class="form-group">
                            <label>Username</label>                          
                            <br>
                                <input type="text" id="username" name="username" class="form-control">
                            <br>    
                            <!-- validation message for username checking with database -->
                            <?php echo validation_errors('<div style="color: #a94442;font-weight: bold;font-size: 16px;"><p>','</p></div>'); ?>                 
                        </div>
                        <div class="form-group">
                            <label>Email</label>
                            <br>
                                <input type="email" id="email" name="email" class="form-control" placeholder="">
                            <br>
                        </div>                      
                        <div class="form-group">
                            <label>Password</label>
                            <br>
                                <input type="password" id="password" name="password" class="form-control" placeholder="">
                            <br>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <br>
                                <input type="password" id="cpassword" name="cpassword" class="form-control" placeholder="">
                            <br>          
                        </div>                                                                            
                        <input type="submit" class="btn btn-primary" value="Sign Up">
                        <br>                                     
                    <?php echo form_close();?>              
                </div>
            </div>
        </div> 
        <div class="col-lg-4"></div>    
    </div>
    <!-- validation plugin configuration -->
    <script type="text/javascript">
        // wait untill the page is loaded completely
        $(document).ready(function(){
        // include the validation for the form function comes with this plugin
            $('#signup-form').validate({
            // set validation rules for input fields
                rules: {
                    username: {
                        required : true,
                        minlength: 5
                    },
                    email: {
                        required : true,
                        email: true
                    },
                    password: {
                        required : true,
                        minlength: 5
                    },
                    cpassword: {
                        required : true,
                        equalTo: "#password"
                    }
                },
            // set validation messages for the rules are set previously
                messages: {
                    username: {
                        required : "Username is required",
                        minlength: "Username must contain at least 5 characters"
                    },
                    email: {
                        required : "Email is required",
                        email: "Enter a valid email. Ex: example@gmail.com"
                    },
                    password: {
                        required : "Password is required",
                        minlength: "Password must contain at least 5 characters"
                    },
                    cpassword: {
                        required : "Confirm Password is required",
                        equalTo: "Confirm Password must be matched with Password"
                    }
                }
            });
        });
    </script>
    <!-- Bootstrap JS file -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>     
    <!-- Validation JS file -->     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>    
</body>
</html>

Validation Plugin Configuration

You can see a new script tag at the end of the file. I’m going to explain it.

First we have to load the jQuery function to wait until the page loading. Then we include the validation function comes with plugin. For this, an ID or a CLASS selector is needed for the signup form. Here I use an ID called signup-form. Next step is including validation rules for the inputs. They are defined in this plugin. Those rules can be set any order. For one input, several rules can be included. 

Rules

Format:

input field name {

       rule 1 : value 1,

       rule 2 : value 2

}

required : true — Without this field, form can not be submitted

minlength : 5   —  Requires at least 5 characters

email: true     —  Checks the email is with the standard email format

equalTo : «#password»         

—  Checks this input is same as another input 

    Ex: Confirm password and Password

Messages

Now we have to set validation messages that are displayed when a user input a wrong/invalid value for each input field.

Format:

input field name {

       rule 1 : message 1,

       rule 2 : message 2

}

These messages can be set as you want. But remember to set a proper and matching message for each input. Otherwise the user will get an wrong idea about the error of the entered input!

CSS for validation messages

.error {
   color: #a94442;
   border-color: #a94442;
   margin-top: 10px;
}

I think now you have got the idea of including validation plugin. Next part is making the controller and the model to get a user registered.

Controller

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Register extends CI_Controller {
 public function __construct()
 {
  parent::__construct();
  $this->load->model('Register_model');
 }

 public function index()
 {
  $this->load->view('signup');
 }

 public function signUp()
 {
  // username availability is checcked after submission
  $this->form_validation->set_rules('username', 'Username', 'trim|is_unique[users.username]');

  if ($this->form_validation->run() == TRUE) {

     $data = array(
         //assign user data into array elements
         'username' => $this->input->post('username'),
         'email' =>$this->input->post('email'),
         'password' =>sha1($this->input->post('password'))
     );
     $this->Register_model->insertUser($data);
     //set message to be shown when registration is completed
     $this->session->set_flashdata('success','User is registered!');
     redirect('Register/Signup');
  } else {
         //return to the signup page again with validation errors
         $this->load->view('signup');
     }   
 }
}

Model

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Register_model extends CI_Model {
 public function insertUser($data)
 {
  // insert data to the database
  $this->db->insert('users', $data);
 }
}

All the explanations are included in the files as comments. Read them for your understanding. After this step, you have completed this application! Now it’s the time to check. Hit the URL in browser and check whether the validations you have set are working or not. That’s all. Now I’m concluding this article..

Wait for the next article guys!

Good Bye!

Import js library (using this tutorial CDN)

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

The default validation rules

Default Tips

messages: {
	required: "This field is required.",
	remote: "Please fix this field.",
	email: "Please enter a valid email address.",
	url: "Please enter a valid URL.",
	date: "Please enter a valid date.",
	dateISO: "Please enter a valid date ( ISO ).",
	number: "Please enter a valid number.",
	digits: "Please enter only digits.",
	creditcard: "Please enter a valid credit card number.",
	equalTo: "Please enter the same value again.",
	maxlength: $.validator.format( "Please enter no more than {0} characters." ),
	minlength: $.validator.format( "Please enter at least {0} characters." ),
	rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
	range: $.validator.format( "Please enter a value between {0} and {1}." ),
	max: $.validator.format( "Please enter a value less than or equal to {0}." ),
	min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

jQuery Validate provides tips Chinese information packet, located in the download package dist / localization / messages_zh.js, reads as follows:

(function( factory ) {
	if ( typeof define === "function" && define.amd ) {
		define( ["jquery", "../jquery.validate"], factory );
	} else {
		factory( jQuery );
	}
}(function( $ ) {

/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhongwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
	required: "这是必填字段",
	remote: "请修正此字段",
	email: "请输入有效的电子邮件地址",
	url: "请输入有效的网址",
	date: "请输入有效的日期",
	dateISO: "请输入有效的日期 (YYYY-MM-DD)",
	number: "请输入有效的数字",
	digits: "只能输入数字",
	creditcard: "请输入有效的信用卡号码",
	equalTo: "你的输入不相同",
	extension: "请输入有效的后缀",
	maxlength: $.validator.format("最多可以输入 {0} 个字符"),
	minlength: $.validator.format("最少要输入 {0} 个字符"),
	rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
	range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
	max: $.validator.format("请输入不大于 {0} 的数值"),
	min: $.validator.format("请输入不小于 {0} 的数值")
});

}));

You can localize the information file dist / localization / messages_zh.js introduced to the page:

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

Use

1, the validation rules written control

<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>

try it»

2, the validation rules written js code

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
    }
});

messages at a control if there is no message, will use the default information

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

try it»

required: true value is a must.
required: «#aa: checked» is an expression of true, you need to verify.
required: function () {} return true, expressed the need for verification.

Two commonly used in the back, in the form need to fill or not fill elements.

Common methods and attention to issues

1, otherwise replace the default SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

Way to use ajax

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

You can set default values ​​validate worded as follows:

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

If you want to submit the form, you need to use form.submit (), instead of $ (form) .submit ().

2, debug, verification is not only submit the form

If this parameter is true, then the form is not submitted, only checks carried out, it is very convenient when debugging.

$().ready(function() {
 $("#signupForm").validate({
        debug:true
    });
});

If a page has multiple forms want to set to debug, use:

$.validator.setDefaults({
   debug: true
})

3, ignore: ignore certain elements are not verified

ignore: ".ignore"

4. Change the location of the error message displayed

errorPlacement：Callback

Indicate the location of misplaced, the default is: error.appendTo (element.parent ()); that is the wrong message behind authentication element.

errorPlacement: function(error, element) {  
    error.appendTo(element.parent());  
}

Examples

<p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>

<form method="get" class="cmxform" id="form1" action="">
  <fieldset>
    <legend>Login Form</legend>
    <p>
      <label for="user">Username</label>
      <input id="user" name="user" required minlength="3">
    </p>
    <p>
      <label for="password">Password</label>
      <input id="password" type="password" maxlength="12" name="password" required minlength="5">
    </p>
    <p>
      <input class="submit" type="submit" value="Login">
    </p>
  </fieldset>
</form>

try it»

The role of the code is: Under normal circumstances the error message is displayed in the <td class = «status»> </ td> if the radio is displayed in the <td> </ td>, if the checkbox is displayed in the content of Behind.

Usually these three attributes simultaneously, to achieve display all error functions in a container, and no information is automatically hidden.

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

5, change the style of the error message displayed

Setting error of style, you can increase the icon is displayed, the system has established a validation.css, designed to maintain the style of the verification document.

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, each field is verified by performing a function

 success: String, Callback 

To verify that the elements by the operation after the verification, if followed by a string that will be treated as a css class, but also with a function.

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

Add «valid» to verify the elements defined in CSS style <style> label.valid {} </ style>.

success: "valid"

7, modify the trigger validation

Although the following is a boolean, but recommended unless you want to false, otherwise Freeze added.

// Reset the form $ (). Ready (function () {
 var validator = $ ( "# signupForm"). validate ({
        submitHandler: function (form) {
            alert ( "submitted");   
            form.submit ();
        }    
    });
    $ ( "# Reset"). Click (function () {
        validator.resetForm ();
    });

});

8, asynchronous verification

 remote: URL 

Way to authenticate using ajax, submitted to the current default value to a remote address verification, if required to submit other values, you can use the data option.

 remote: "check-email.php" 

remote: {
    url: "check-email.php", // Spooler type: "post", // data transmission mode dataType: "json", // receive data format data: {username // data to be passed: function ( ) {
            return $ ( "# username") val ().;
        }
    }
}

Remote address only output «true» or «false», can not have other output.

9, adding custom validation

 addMethod: name, method, message 

Custom authentication methods

// Characters two bytes jQuery.validator.addMethod ( "byteRangeLength", function (value, element, param) {
    var length = value.length;
    for (var i = 0; i <value.length; i ++) {
        if (value.charCodeAt (i)> 127) {
            length ++;
        }
    }
  return this.optional (element) || (length> = param [0] && length <= param [1]);   
}, $ .validator.format ( "Make sure that the value entered in {0} - {1} between bytes (one byte characters count 2)"));

// Postal code verification jQuery.validator.addMethod ( "isZipCode", function (value, element) {   
    var tel = / ^ [0-9] {6} $ /;
    return this.optional (element) || (tel.test (value));
} "Please fill in the correct your zip code");

Note: To add additional-methods.js file or add jquery.validate.js file.Recommendations generally written in additional-methods.js file.

Note: messages_cn.js file, add: isZipCode: «can include text, letters, numbers, and underscores.»Before calling To add additional-methods.js file references.

10, radio and checkbox, select the verification

The radio must select a required representation.

<Input type = "radio" id = "gender_male" value = "m" name = "gender" required />
<Input type = "radio" id = "gender_female" value = "f" name = "gender" />

checkbox must select the required representation.

<Input type = "checkbox" class = "checkbox" id = "agree" name = "agree" required />

represents the minimum number of minlength checkbox must be checked, maxlength represents the maximum number of selected, rangelength: [2,3] represents the number of the selected range.

<Input type = "checkbox" class = "checkbox" id = "spam_email" value = "email" name = "spam []" required minlength = "2" />
<Input type = "checkbox" class = "checkbox" id = "spam_phone" value = "phone" name = "spam []" />
<Input type = "checkbox" class = "checkbox" id = "spam_mail" value = "mail" name = "spam []" />

select the required showing the selected value can not be empty.

<Select id = "jungle" name = "jungle" title = "Please select something!" Required>
    <Option value = ""> </ option>
    <Option value = "1"> Buga </ option>
    <Option value = "2"> Baga </ option>
    <Option value = "3"> Oi </ option>
</ Select>

select the selected representation minlength minimum number of (multiple choice of select), maxlength represents the maximum number of selected, rangelength: [2,3] represents the number of the selected interval.

<Select id = "fruit" name = "fruit" title = "Please select at least two fruits" class = "{required: true, minlength: 2}" multiple = "multiple">
    <Option value = "b"> Banana </ option>
    <Option value = "a"> Apple </ option>
    <Option value = "p"> Peach </ option>
    <Option value = "t"> Turtle </ option>
</ Select>

jQuery.validate Chinese API

Validator

validate method returns a Validator object. Validator object has many methods can be used to trigger the calibration procedure or change the contents of the form, several commonly used methods are listed below.

Built-in authentication

validate () is optional

$(".selector").validate
({
	debug:true
})

$.validator.setDefaults({
	debug:true
})

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

$("#myform").validate({
	ignore:".ignore"
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	}
})

$(".selector").validate({
	rules:{
		name:"required",
		email:{
			required:true,
			email:true
		}
	},
	messages:{
		name:"Name不能为空",
		email:{       
			required:"E-mail不能为空",
			email:"E-mail地址不正确"
		}
	}
})

$("#myform").validate({
	groups:{
		username:"fname 
		lname"
	},
	errorPlacement:function(error,element) {
		if (element.attr("name") == "fname" || element.attr("name") == "lname")   
			error.insertAfter("#lastname");
		else    
			error.insertAfter(element);
	},
   debug:true
})

$(".selector").validate({  
	onsubmit:false
})

$(".selector").validate({   
	onfocusout:false
})

$(".selector").validate({
   onkeyup:false
})

$(".selector").validate({
   onclick:false
})

$(".selector").validate({
   focusInvalid:false
})

$(".selector").validate({
   focusCleanup:true
})

$(".selector").validate({ 
	errorClass:"invalid"
})

$(".selector").validate
   errorElement:"em"
})

$(".selector").validate({
   wrapper:"li"
})

$("#myform").validate({   
	errorLabelContainer:"#messageBox",
	wrapper:"li",
	submitHandler:function() { 
		alert("Submitted!") 
	}
})

$(".selector").validate({  
	showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		this.defaultShowErrors();
	}
})

$("#myform").validate({  
	errorPlacement:function(error,element) {  
		error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})

$("#myform").validate({        
	success:"valid",
        submitHandler:function() { 
			alert("Submitted!") 
		}
})

addMethod (name, method, message) method

Parameters name is the name of the add method.

Parameter method is a function that takes three parameters (value, element, param).
value is the value of the element, element is the element itself, param is the parameter.

We can use addMethod to add except the built-in authentication method Validation method. For example, there is a field, only to lose a letter, the range is af, written as follows:

$ .validator.addMethod ( "Af", function (value, element, params) {  
	if (value.length> 1) {
		return false;
	}
    if (value> = params [0] && value <= params [1]) {
		return true;
	} Else {
		return false;
	}
}, "Must be a letter, and af");

If there is a form field id = «username», written in the rules:

username: {
   af: [ "a", "f"]
}

AddMethod first parameter is the name of the authentication method to add, then is af.
addMethod third parameter, a custom error message, suggesting here is: «must be a letter, and af».
addMethod second parameter is a function, this is more important, the wording of the decision to use this method of verification.

If only one parameter, write directly, such as af: «a», then this is a unique parameter, if more than one parameter is written in [], separated by commas.

meta String mode

$ ( "# Myform"). Validate ({

   meta: "validate",

   submitHandler: function () { 
alert ( "Submitted!")}

})

<Script type = "text / javascript" 
src = "js / jquery.metadata.js"> </ script>

<Script type = "text / javascript" 
src = "js / jquery.validate.js"> </ script>

<Form id = "myform">

  <Input type = "text" 
name = "email" class = "{validate: {required: true, email: true}}" />

  <Input type = "submit" 
value = "Submit" />

</ Form>

Examples Demo

Fictional examples

• Error message container
• Custom message as a data element
• radio (radio buttons), checkbox (check button) and select (drop-down box)
• Interactive form (Form) and plug (AJAX submission)
• Custom methods and message display
• Dynamic Forms
• Use jQuery UI Themeroller custom form style
• TinyMCE — a lightweight browser-based WYSIWYG editor
• File input box
• jQuery Mobile Forms Authentication

Examples of real-world

• Milk registration form
• Marketo registration form
• Housing sale folding panel form
• Remote CAPTCHA (PIN) verification

Examples Download