|
16 | 16 | Enables debug mode. If true, the form is not submitted and certain errors are displayed on the console (will check if a <code>window.console</code> property exists). Try to enable when a form is just submitted instead of validation stopping the submit.
|
17 | 17 | <p><strong>Example</strong>: Prevents the form from submitting and tries to help setting up the validation with warnings about missing methods and other debug messages.</p>
|
18 | 18 | <pre><code>
|
19 |
| - $(".selector").validate({ |
| 19 | + $("#myform").validate({ |
20 | 20 | debug: true
|
21 | 21 | });
|
22 | 22 | </code></pre>
|
|
28 | 28 | Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to <a href="http://www.malsup.com/jquery/form/#api">submit a form via Ajax</a> after it is validated.
|
29 | 29 | <p><strong>Example</strong>: Submits the form via Ajax when valid.</p>
|
30 | 30 | <pre><code>
|
31 |
| - $(".selector").validate({ |
| 31 | + $("#myform").validate({ |
32 | 32 | submitHandler: function(form) {
|
33 | 33 | $(form).ajaxSubmit();
|
34 | 34 | }
|
35 | 35 | });
|
36 | 36 | </code></pre>
|
37 | 37 | <p><strong>Example</strong>: Use submitHandler to process something and then using the default submit. Note that "form" refers to a DOM element, this way the validation isn't triggered again.</p>
|
38 | 38 | <pre><code>
|
39 |
| - $(".selector").validate({ |
| 39 | + $("#myform").validate({ |
40 | 40 | submitHandler: function(form) {
|
41 | 41 | // do other things for a valid form
|
42 | 42 | form.submit();
|
|
58 | 58 | Callback for custom code when an invalid form is submitted. Called with an event object as the first argument, and the validator as the second.
|
59 | 59 | <p><strong>Example</strong>: Displays a message above the form, indicating how many fields are invalid when the user tries to submit an invalid form.</p>
|
60 | 60 | <pre><code>
|
61 |
| - $(".selector").validate({ |
| 61 | + $("#myform").validate({ |
62 | 62 | invalidHandler: function(event, validator) {
|
63 | 63 | // 'this' refers to the form
|
64 | 64 | var errors = validator.numberOfInvalids();
|
|
101 | 101 | Key/value pairs defining custom rules. Key is the name of an element (or a group of checkboxes/radio buttons), value is an object consisting of rule/parameter pairs or a plain String. Can be combined with class/attribute/data rules. Each rule can be specified as having a depends-property to apply the rule only in certain conditions. See the second example below for details.
|
102 | 102 | <p><strong>Example</strong>: Specifies a name element as required and an email element as required (using the shortcut for a single rule) and a valid email address (using another object literal).</p>
|
103 | 103 | <pre><code>
|
104 |
| - $(".selector").validate({ |
| 104 | + $("#myform").validate({ |
105 | 105 | rules: {
|
106 | 106 | // simple rule, converted to {required:true}
|
107 | 107 | name: "required",
|
|
115 | 115 | </code></pre>
|
116 | 116 | <p><strong>Example</strong>: Specifies a contact element as required and as email address, the latter depending on a checkbox being checked for contact via email.</p>
|
117 | 117 | <pre><code>
|
118 |
| - $(".selector").validate({ |
| 118 | + $("#myform").validate({ |
119 | 119 | rules: {
|
120 | 120 | contact: {
|
121 | 121 | required: true,
|
|
130 | 130 | </code></pre>
|
131 | 131 | <p><strong>Example</strong>: Configure a rule that requires a parameter, along with a <code>depends</code> callback.</p>
|
132 | 132 | <pre><code>
|
133 |
| - $(".selector").validate({ |
| 133 | + $("#myform").validate({ |
134 | 134 | rules: {
|
135 | 135 | // at least 15€ when bonus material is included
|
136 | 136 | pay_what_you_want: {
|
|
154 | 154 | Key/value pairs defining custom messages. Key is the name of an element, value the message to display for that element. Instead of a plain message, another map with specific messages for each rule can be used. Overrides the title attribute of an element or the default message for the method (in that order). Each message can be a String or a Callback. The callback is called in the scope of the validator, with the rule's parameters as the first argument and the element as the second, and must return a String to display as the message.
|
155 | 155 | <p><strong>Example</strong>: Specifies a name element as required and an email element as required and a valid email address. A single message is specified for the name element, and two messages for email.</p>
|
156 | 156 | <pre><code>
|
157 |
| - $(".selector").validate({ |
| 157 | + $$("#myform").validate({ |
158 | 158 | rules: {
|
159 | 159 | name: "required",
|
160 | 160 | email: {
|
|
173 | 173 | </code></pre>
|
174 | 174 | <p><strong>Example</strong>: Validates the name-field as required and having at least two characters. Provides a callback message using jQuery.validator.format to avoid having to specify the parameter in two places.</p>
|
175 | 175 | <pre><code>
|
176 |
| - $(".selector").validate({ |
| 176 | + $("#myform").validate({ |
177 | 177 | rules: {
|
178 | 178 | name: {
|
179 | 179 | required: true,
|
|
219 | 219 | <p>A boolean true is not a valid value.</p>
|
220 | 220 | <p><strong>Example</strong>: Disables onsubmit validation, allowing the user to submit whatever he wants, while still validating on keyup/blur/click events (if not specified otherwise).</p>
|
221 | 221 | <pre><code>
|
222 |
| - $(".selector").validate({ |
| 222 | + $("#myform").validate({ |
223 | 223 | onsubmit: false
|
224 | 224 | });
|
225 | 225 | </code></pre>
|
|
233 | 233 | <p>A boolean true is not a valid value.</p>
|
234 | 234 | <p><strong>Example</strong>: Disables onblur validation.</p>
|
235 | 235 | <pre><code>
|
236 |
| - $(".selector").validate({ |
| 236 | + $("#myform").validate({ |
237 | 237 | onfocusout: false
|
238 | 238 | });
|
239 | 239 | </code></pre>
|
|
255 | 255 | <p>A boolean true is not a valid value.</p>
|
256 | 256 | <p><strong>Example</strong>: Disables onkeyup validation.</p>
|
257 | 257 | <pre><code>
|
258 |
| - $(".selector").validate({ |
| 258 | + $("#myform").validate({ |
259 | 259 | onkeyup: false
|
260 | 260 | });
|
261 | 261 | </code></pre>
|
|
277 | 277 | <p>A boolean true is not a valid value.</p>
|
278 | 278 | <p><strong>Example</strong>: Disables onclick validation of checkboxes and radio buttons.</p>
|
279 | 279 | <pre><code>
|
280 |
| - $(".selector").validate({ |
| 280 | + $("#myform").validate({ |
281 | 281 | onclick: false
|
282 | 282 | });
|
283 | 283 | </code></pre>
|
|
297 | 297 | Focus the last active or first invalid element on submit via validator.focusInvalid(). The last active element is the one that had focus when the form was submitted, avoiding stealing its focus. If there was no element focused, the first one in the form gets it, unless this option is turned off.
|
298 | 298 | <p><strong>Example</strong>: Disables focusing of invalid elements.</p>
|
299 | 299 | <pre><code>
|
300 |
| - $(".selector").validate({ |
| 300 | + $("#myform").validate({ |
301 | 301 | focusInvalid: false
|
302 | 302 | });
|
303 | 303 | </code></pre>
|
|
309 | 309 | If enabled, removes the errorClass from the invalid elements and hides all error messages whenever the element is focused. Avoid combination with focusInvalid.
|
310 | 310 | <p><strong>Example</strong>: Enables cleanup when focusing elements, removing the error class and hiding error messages when an element is focused.</p>
|
311 | 311 | <pre><code>
|
312 |
| - $(".selector").validate({ |
| 312 | + $("#myform").validate({ |
313 | 313 | focusCleanup: true
|
314 | 314 | });
|
315 | 315 | </code></pre>
|
|
321 | 321 | Use this class to create error labels, to look for existing error labels and to add it to invalid elements.
|
322 | 322 | <p><strong>Example</strong>: Sets the error class to "invalid".</p>
|
323 | 323 | <pre><code>
|
324 |
| - $(".selector").validate({ |
| 324 | + $("#myform").validate({ |
325 | 325 | errorClass: "invalid"
|
326 | 326 | });
|
327 | 327 | </code></pre>
|
|
333 | 333 | This class is added to an element after it was validated and considered valid.
|
334 | 334 | <p><strong>Example</strong>: Sets the valid class to "success".</p>
|
335 | 335 | <pre><code>
|
336 |
| - $(".selector").validate({ |
| 336 | + $("#myform").validate({ |
337 | 337 | validClass: "success"
|
338 | 338 | });
|
339 | 339 | </code></pre>
|
|
345 | 345 | Use this element type to create error messages and to look for existing error messages. The default, "label", has the advantage of creating a meaningful link between error message and invalid field using the for attribute (which is always used, regardless of element type).
|
346 | 346 | <p><strong>Example</strong>: Sets the error element to "em".</p>
|
347 | 347 | <pre><code>
|
348 |
| - $(".selector").validate({ |
| 348 | + $("#myform").validate({ |
349 | 349 | errorElement: "em"
|
350 | 350 | });
|
351 | 351 | </code></pre>
|
|
357 | 357 | Wrap error labels with the specified element. Useful in combination with errorLabelContainer to create a list of error messages.
|
358 | 358 | <p><strong>Example</strong>: Wrap each error element with a list item, useful when using an ordered or unordered list as the error container.</p>
|
359 | 359 | <pre><code>
|
360 |
| - $(".selector").validate({ |
| 360 | + $("#myform").validate({ |
361 | 361 | wrapper: "li"
|
362 | 362 | });
|
363 | 363 | </code></pre>
|
|
398 | 398 | A custom message display handler. Gets the map of errors as the first argument and an array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().
|
399 | 399 | <p><strong>Example</strong>: Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.</p>
|
400 | 400 | <pre><code>
|
401 |
| - $(".selector").validate({ |
| 401 | + $("#myform").validate({ |
402 | 402 | showErrors: function(errorMap, errorList) {
|
403 | 403 | $("#summary").html("Your form contains "
|
404 | 404 | + this.numberOfInvalids()
|
|
479 | 479 | How to highlight invalid fields. Override to decide which fields and how to highlight.
|
480 | 480 | <p><strong>Example</strong>: Highlights an invalid element by fading it out and in again.</p>
|
481 | 481 | <pre><code>
|
482 |
| - $(".selector").validate({ |
| 482 | + $("#myform").validate({ |
483 | 483 | highlight: function(element, errorClass) {
|
484 | 484 | $(element).fadeOut(function() {
|
485 | 485 | $(element).fadeIn();
|
|
489 | 489 | </code></pre>
|
490 | 490 | <p><strong>Example</strong>: Adds the error class to both the invalid element and its label</p>
|
491 | 491 | <pre><code>
|
492 |
| - $(".selector").validate({ |
| 492 | + $("#myform").validate({ |
493 | 493 | highlight: function(element, errorClass, validClass) {
|
494 | 494 | $(element).addClass(errorClass).removeClass(validClass);
|
495 | 495 | $(element.form).find("label[for=" + element.id + "]")
|
|
526 | 526 | Set to skip reading messages from the title attribute, helps to avoid issues with Google Toolbar; default is false for compability, the message-from-title is likely to be completely removed in a future release.
|
527 | 527 | <p><strong>Example</strong>: Configure the plugin to ignore title attributes on validated elements when looking for messages.</p>
|
528 | 528 | <pre><code>
|
529 |
| - $(".selector").validate({ |
| 529 | + $("#myform").validate({ |
530 | 530 | ignoreTitle: true
|
531 | 531 | });
|
532 | 532 | </code></pre>
|
|
0 commit comments