|
1 | 1 | /* |
2 | | - FORM VALIDATION MADE EASY |
3 | | - ------------------------------------------ |
4 | | - Created by Victor Jonsson <http://www.victorjonsson.se> |
5 | | - Documentation and issue tracking on Github <https://github.com/victorjonsson/jQuery-Form-Validator/> |
6 | | - Available for download on jQuery.com <http://plugins.jquery.com/project/jQueryFormValidtor/> |
7 | | - |
8 | | - (c) 2011 Victor Jonsson, Sweden. |
9 | | - Dual licensed under the MIT or GPL Version 2 licenses |
10 | | - |
11 | | - $version 1.1 |
| 2 | +* |
| 3 | +* FORM VALIDATION MADE EASY |
| 4 | +* ------------------------------------------ |
| 5 | +* Created by Victor Jonsson <http://www.victorjonsson.se> |
| 6 | +* Documentation and issue tracking on Github <https://github.com/victorjonsson/jQuery-Form-Validator/> |
| 7 | +* Available for download at jQuery.com <http://plugins.jquery.com/project/jQueryFormValidtor/> |
| 8 | +* |
| 9 | +* (c) 2011 Victor Jonsson, Sweden. |
| 10 | +* Dual licensed under the MIT or GPL Version 2 licenses |
| 11 | +* |
| 12 | +* $version 1.1 |
| 13 | +* |
12 | 14 | */ |
| 15 | + |
13 | 16 | (function($) { |
14 | 17 | $.extend($.fn, { |
15 | 18 |
|
16 | 19 | /** |
17 | | - * @param attrName |
18 | | - * @return jQuery |
| 20 | + * Should be called on the element containing the input elements |
| 21 | + * @param {Object} language Optional, will override jQueryFormUtils.LANG |
| 22 | + * @param {Object} settings Optional, will override the default settings |
| 23 | + * @return {jQuery} |
| 24 | + */ |
| 25 | + validateOnBlur : function(language, settings) { |
| 26 | + $(this).find('textarea,input').blur(function() { |
| 27 | + $(this).doValidate(language, settings); |
| 28 | + }); |
| 29 | + |
| 30 | + return $(this); |
| 31 | + }, |
| 32 | + |
| 33 | + /** |
| 34 | + * Should be called on the element containing the input elements. |
| 35 | + * <input data-help="The info that I want to display for the user when input is focused" ... /> |
| 36 | + * @param {String} attrName Optional, default is data-help |
| 37 | + * @return {jQuery} |
19 | 38 | */ |
20 | | - showHelp : function(attrName) { |
| 39 | + showHelpOnFocus : function(attrName) { |
21 | 40 | if(typeof attrName == 'undefined') |
22 | 41 | attrName = 'data-help'; |
23 | 42 |
|
24 | | - $(this).each(function() { |
| 43 | + $(this).find('textarea,input').each(function() { |
25 | 44 | var help = $(this).attr(attrName); |
26 | 45 | if(help) { |
27 | 46 | $(this) |
28 | 47 | .focus(function() { |
29 | | - var span = $('<span />') |
30 | | - .addClass('jquery_form_help') |
31 | | - .text(help) |
32 | | - .hide() |
33 | | - .fadeIn(); |
34 | | - |
35 | | - $(this).after(span); |
| 48 | + if($(this).parent().find('.jquery_form_help').length == 0) { |
| 49 | + $(this).after( |
| 50 | + $('<span />') |
| 51 | + .addClass('jquery_form_help') |
| 52 | + .text(help) |
| 53 | + .hide() |
| 54 | + .fadeIn() |
| 55 | + ); |
| 56 | + } |
36 | 57 | }) |
37 | 58 | .blur(function() { |
38 | 59 | $(this).parent().find('.jquery_form_help') |
|
42 | 63 | }); |
43 | 64 | } |
44 | 65 | }); |
| 66 | + |
45 | 67 | return $(this); |
46 | 68 | }, |
47 | 69 |
|
48 | 70 | /** |
49 | 71 | * Function that validates the value of given input and shows |
50 | 72 | * error message in a span element that is appended to the parent |
51 | 73 | * element |
52 | | - * @param language |
53 | | - * @param settings |
54 | | - * @return jQuery |
| 74 | + * @param {Object} language Optional, will override jQueryFormUtils.LANG |
| 75 | + * @param {Object} settings Optional, will override the default settings |
| 76 | + * @param {Boolean} attachKeyupEvent Optional |
| 77 | + * @return {jQuery} |
55 | 78 | */ |
56 | | - doValidate : function(language, settings) { |
| 79 | + doValidate : function(language, settings, attachKeyupEvent) { |
| 80 | + if(typeof attachKeyupEvent == 'undefined') |
| 81 | + attachKeyupEvent = true; |
| 82 | + |
57 | 83 | var config = { |
58 | 84 | validationRuleAttribute : 'data-validation', |
59 | 85 | errorElementClass : 'error', // Class that will be put on elements which value is invalid |
|
75 | 101 | .removeClass(config.errorElementClass) |
76 | 102 | .parent() |
77 | 103 | .find('.jquery_form_error_message').remove(); |
| 104 | + |
| 105 | + if(config.borderColorOnError != '') |
| 106 | + $(this).css('border-color', jQueryFormUtils.defaultBorderColor); |
78 | 107 |
|
79 | 108 | var validation = jQueryFormUtils.validateInput($(this), language, config.validationRuleAttribute); |
80 | 109 |
|
81 | | - if(validation !== true) { |
| 110 | + if(validation === true) |
| 111 | + $(this).unbind('keyup'); |
| 112 | + else { |
82 | 113 | $(this) |
83 | 114 | .addClass(config.errorElementClass) |
84 | 115 | .parent() |
85 | 116 | .append('<span class="jquery_form_error_message">'+validation+'</span>'); |
86 | 117 |
|
87 | 118 | if(config.borderColorOnError != '') |
88 | 119 | $(this).css('border-color', config.borderColorOnError); |
89 | | - } |
90 | | - else { |
91 | | - if(config.borderColorOnError != '') |
92 | | - $(this).css('border-color', jQueryFormUtils.defaultBorderColor); |
| 120 | + |
| 121 | + if(attachKeyupEvent) { |
| 122 | + $(this).bind('keyup', function() { |
| 123 | + $(this).doValidate(language, settings, false); |
| 124 | + }); |
| 125 | + } |
93 | 126 | } |
94 | 127 |
|
95 | 128 | return $(this); |
|
128 | 161 |
|
129 | 162 | /** |
130 | 163 | * Tells whether or not to validate element with this name and of this type |
131 | | - * @param string name |
132 | | - * @param string type |
133 | | - * @return boolean |
| 164 | + * @param {String} name |
| 165 | + * @param {String} type |
| 166 | + * @return {Boolean} |
134 | 167 | */ |
135 | 168 | var ignoreInput = function(name, type) { |
136 | | - if (type == 'submit') |
| 169 | + if (type == 'submit' || type == 'button') |
137 | 170 | return true; |
| 171 | + |
138 | 172 | for (var i = 0; i < config.ignore.length; i++) { |
139 | 173 | if (config.ignore[i] == name) |
140 | 174 | return true; |
|
237 | 271 | var messages = '<strong>' + language.errorTitle + '</strong>'; |
238 | 272 | for (var i = 0; i < errorMessages.length; i++) |
239 | 273 | messages += '<br />* ' + errorMessages[i]; |
240 | | - $(this).children().eq(0).prepend('<p class="' + config.errorMessageClass + '">' + messages + '</p>'); |
| 274 | + $(this).children().eq(0).before('<p class="' + config.errorMessageClass + '">' + messages + '</p>'); |
241 | 275 | if(config.scrollToTopOnError) |
242 | 276 | $(window).scrollTop($(form).offset().top - 20); |
243 | 277 | } |
|
0 commit comments