Skip to content

Commit 9d5ed46

Browse files
victorjonssonvictorjonsson
committed
new features, showHelp(), doValidate()
1 parent 0affe17 commit 9d5ed46

File tree

3 files changed

+142
-36
lines changed

3 files changed

+142
-36
lines changed

‎example.html

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ <h2>Example of all features</h2>
108108
</p>
109109

110110
<p>
111-
<strong>Valid Swedish social security number yyymmddXXXX</strong> <em>validate_swesc</em><br/>
111+
<strong>Valid Swedish social security number yyyymmddXXXX</strong> <em>validate_swesc</em><br/>
112112
<input data-validation="validate_swesc"/>
113113
</p>
114114

@@ -123,7 +123,14 @@ <h2>Example of all features</h2>
123123
captcha[VALUE-TO-VALIDATE]</em><br/>
124124
<input data-validation="validate_spamcheck captchajqueryvalidation"/>
125125
</p>
126-
126+
<p>
127+
<strong>One of these radio buttons has to be checked</strong>
128+
<em>required</em>
129+
<br />
130+
<input type="radio" data-validation="required" name="s1" value="0" /> Yes<br />
131+
<input type="radio" name="s1" value="1" /> No<br />
132+
<input type="radio" name="s1" value="2" /> Maybe
133+
</p>
127134
<p>
128135
<strong>These two inputs has to have identical values (minimum 3 characters)</strong> <em>validate_confirmation length3</em><br/>
129136
<input name="something" data-validation="validate_confirmation validate_min_length length3"/>
@@ -163,22 +170,22 @@ <h2>
163170
<form action="" id="custom_form">
164171
<p>
165172
<strong>Length between 3-5 characters</strong> <em>validate_length length3-5</em><br/>
166-
<textarea data-validation="validate_length length3-5" rows="4"></textarea>
173+
<textarea name="1" data-validation="validate_length length3-5" rows="4"></textarea>
167174
</p>
168175

169176
<p>
170177
<strong>E-mail</strong> <em>validate_email</em><br/>
171-
<input data-validation="validate_email"/>
178+
<input name="2" data-validation="validate_email"/>
172179
</p>
173180

174181
<p>
175182
<strong>Domain</strong> <em>validate_domain</em><br/>
176-
<input data-validation="validate_domain"/>
183+
<input id="testing" name="3" data-help="Only top domain name" data-validation="validate_domain"/>
177184
</p>
178185

179186
<p>
180187
<strong>Url</strong> <em>validate_url</em><br/>
181-
<input data-validation="validate_url"/>
188+
<input name="4" data-validation="validate_url"/>
182189
</p>
183190

184191
<p>
@@ -189,11 +196,11 @@ <h2>
189196

190197
<p>
191198
<strong>Time HH:mm</strong> <em>validate_time</em><br/>
192-
<input data-validation="validate_time" name="hours"/>
199+
<input name="6" data-validation="validate_time" name="hours"/>
193200
</p>
194201

195202
<p>
196-
<input type="submit" value="Validate form"/>
203+
<input name="7" type="submit" value="Validate form"/>
197204
</p>
198205
</form>
199206

@@ -203,15 +210,23 @@ <h2>
203210
borderColorOnError : '',
204211
ignore: []
205212
};
206-
$('#custom_form').submit(function() {
207-
conf.ignore.length = 0;
208-
if (!$('input[name=disable_hours]').is(':checked'))
209-
conf.ignore.push('hours');
210-
if ($(this).validate(false, conf))
211-
alert('Valid!');
212-
return false;
213-
});
214-
213+
214+
$('#custom_form')
215+
.submit(function() {
216+
conf.ignore.length = 0;
217+
218+
if (!$('input[name=disable_hours]').is(':checked'))
219+
conf.ignore.push('hours');
220+
if ($(this).validate(false, conf))
221+
alert('Valid!');
222+
223+
return false;
224+
})
225+
.find('textarea,input')
226+
.blur(function() {
227+
$(this).doValidate(false, conf);
228+
})
229+
.showHelp();
215230
</script>
216231

217232
</div>

‎jquery.formvalidator.js

Lines changed: 104 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,98 @@
88
(c) 2011 Victor Jonsson, Sweden.
99
Dual licensed under the MIT or GPL Version 2 licenses
1010
11-
$version 1.0
11+
$version 1.1
1212
*/
1313
(function($) {
1414
$.extend($.fn, {
15+
16+
/**
17+
* @param attrName
18+
* @return jQuery
19+
*/
20+
showHelp : function(attrName) {
21+
if(typeof attrName == 'undefined')
22+
attrName = 'data-help';
23+
24+
$(this).each(function() {
25+
var help = $(this).attr(attrName);
26+
if(help) {
27+
$(this)
28+
.focus(function() {
29+
var span = $('<span />')
30+
.addClass('jquery_form_help')
31+
.text(help)
32+
.hide()
33+
.fadeIn();
34+
35+
$(this).after(span);
36+
})
37+
.blur(function() {
38+
$(this).parent().find('.jquery_form_help')
39+
.fadeOut('slow', function() {
40+
$(this).remove();
41+
});
42+
});
43+
}
44+
});
45+
return $(this);
46+
},
47+
48+
/**
49+
* Function that validates the value of given input and shows
50+
* error message in a span element that is appended to the parent
51+
* element
52+
* @param language
53+
* @param settings
54+
* @return jQuery
55+
*/
56+
doValidate : function(language, settings) {
57+
var config = {
58+
validationRuleAttribute : 'data-validation',
59+
errorElementClass : 'error', // Class that will be put on elements which value is invalid
60+
borderColorOnError : 'red'
61+
};
62+
63+
if (settings)
64+
$.extend(config, settings);
65+
if (language)
66+
$.extend(language, jQueryFormUtils.LANG);
67+
else
68+
language = jQueryFormUtils.LANG;
69+
70+
if (jQueryFormUtils.defaultBorderColor == null && $(this).attr('type') == 'text')
71+
jQueryFormUtils.defaultBorderColor = $(this).css('border-color');
72+
73+
// Remove possible error style applied by previous validation
74+
$(this)
75+
.removeClass(config.errorElementClass)
76+
.parent()
77+
.find('.jquery_form_error_message').remove();
78+
79+
var validation = jQueryFormUtils.validateInput($(this), language, config.validationRuleAttribute);
80+
81+
if(validation !== true) {
82+
$(this)
83+
.addClass(config.errorElementClass)
84+
.parent()
85+
.append('<span class="jquery_form_error_message">'+validation+'</span>');
86+
87+
if(config.borderColorOnError != '')
88+
$(this).css('border-color', config.borderColorOnError);
89+
}
90+
else {
91+
if(config.borderColorOnError != '')
92+
$(this).css('border-color', jQueryFormUtils.defaultBorderColor);
93+
}
94+
95+
return $(this);
96+
},
97+
98+
/**
99+
* Function that validate all inputs in a form
100+
* @param language
101+
* @param settings
102+
*/
15103
validate : function(language, settings) {
16104

17105
/*
@@ -66,7 +154,7 @@
66154
/** Error messages for this validation */
67155
var errorMessages = [];
68156

69-
/** Input elements whitch value wasnt valid */
157+
/** Input elements which value was not valid */
70158
var errorInputs = [];
71159

72160
/** Form instance */
@@ -77,17 +165,17 @@
77165
//
78166
$(this).find('input[type=radio]').each(function() {
79167
var validationRule = $(this).attr(config.validationRuleAttribute);
80-
if (typeof validationRule != 'undefined' && validationRule != null) {
81-
if (validationRule == 'required') {
82-
var radioButtonName = $(this).attr('name');
83-
var isChecked = false;
84-
form.find('input[name=' + radioButtonName + ']').each(function() {
85-
if ($(this).is(':checked'))
86-
isChecked = true;
87-
});
88-
if (!isChecked) {
89-
errorMessages.push(language.requiredFields);
90-
}
168+
if (typeof validationRule != 'undefined' && validationRule == 'required') {
169+
var radioButtonName = $(this).attr('name');
170+
var isChecked = false;
171+
form.find('input[name=' + radioButtonName + ']').each(function() {
172+
if ($(this).is(':checked'))
173+
isChecked = true;
174+
});
175+
if (!isChecked) {
176+
errorMessages.push(language.requiredFields);
177+
errorInputs.push($(this));
178+
$(this).attr('data-error', language.requiredFields);
91179
}
92180
}
93181
});
@@ -128,10 +216,8 @@
128216
//
129217
// Remove possible error messages from last validation
130218
//
131-
if (config.errorMessagePosition == 'top')
132-
$('.' + config.errorMessageClass).remove();
133-
else
134-
$('.jquery_form_error_message').remove();
219+
$('.' + config.errorMessageClass).remove();
220+
$('.jquery_form_error_message').remove();
135221

136222

137223
//
@@ -459,7 +545,6 @@ jQueryFormUtils.validateDomain = function(val) {
459545
* @return string|true
460546
*/
461547
jQueryFormUtils.validateInput = function(el, language, validationRuleAttr, form) {
462-
463548
var value = jQuery.trim(el.val());
464549
var validationRules = el.attr(validationRuleAttr);
465550

@@ -568,7 +653,7 @@ jQueryFormUtils.validateInput = function(el, language, validationRuleAttr, form)
568653
}
569654

570655
// confirmation
571-
if (validationRules.indexOf('validate_confirmation') > -1) {
656+
if (validationRules.indexOf('validate_confirmation') > -1 && typeof(form) != 'undefined') {
572657
var conf = '';
573658
var confInput = form.find('input[name=' + el.attr('name') + '_confirmation]').eq(0);
574659
if (confInput)

‎style.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,4 +113,10 @@ em {
113113
font-size: 90%;
114114
color: #81815c;
115115
padding: 0 1px;
116+
}
117+
118+
.jquery_form_help {
119+
color:#999;
120+
font-family: Georgia, "Times New Roman", serif;
121+
margin-left: 4px;
116122
}

0 commit comments

Comments
 (0)