Skip to content

Commit 47ea799

Browse files
Samuel BarneySamuel Barney
Samuel Barney
authored and
Samuel Barney
committed
Addition of Custom Error Message Handling
1 parent 7093fb1 commit 47ea799

File tree

3 files changed

+189
-16
lines changed

3 files changed

+189
-16
lines changed

‎css/customMessages.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
body {
2+
3+
}
4+
5+
.center {
6+
text-align: center;
7+
}
8+
9+

‎demos/demoCustomErrorMessages.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
5+
<title>JQuery Validation Engine</title>
6+
<link rel="stylesheet" href="../css/validationEngine.jquery.css" type="text/css"/>
7+
<link rel="stylesheet" href="../css/template.css" type="text/css"/>
8+
<link rel="stylesheet" href="../css/customMessages.css" type="text/css"/>
9+
<script src="../js/jquery-1.6.min.js" type="text/javascript">
10+
</script>
11+
<script src="../js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
12+
</script>
13+
<script src="../js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
14+
</script>
15+
<script>
16+
jQuery(document).ready(function(){
17+
// binds form submission and fields to the validation engine
18+
jQuery("#formID").validationEngine({
19+
'custom_error_messages': {
20+
// Custom Error Messages for Validation Types
21+
'required': {
22+
'message': "This field cannot be empty."
23+
}
24+
,'custom[url]': {
25+
'message': "This validation error message will never be called"
26+
}
27+
// Custom Error Messages for IDs
28+
,'#url' : {
29+
'custom[url]': {
30+
'message': "This is an id error. It takes precedence over class and validation type errors."
31+
}
32+
}
33+
,'#number': {
34+
'min': {
35+
'message': "This must be greater than 0!"
36+
}
37+
}
38+
// Custom Error Messages for Classes
39+
,'.class_url': {
40+
'custom[url]': {
41+
'message': "This is a validation message for a class. It is never called because there" +
42+
" is an id error message."
43+
}
44+
}
45+
,'.class_req': {
46+
'required': {
47+
'message': "This is a class message. It takes precedence over validation type error messages."
48+
}
49+
50+
}
51+
}
52+
});
53+
});
54+
</script>
55+
</head>
56+
<body>
57+
<h1 class="center">
58+
Custom Error Messages
59+
</h1>
60+
<p class="center">
61+
<a href="../index.html" >Back to index</a>
62+
</p>
63+
<form id="formID" class="formular" method="post">
64+
<fieldset>
65+
<legend>
66+
Required Fields!
67+
</legend>
68+
<label>
69+
<span >Validation Custom Error ('required'):</span>
70+
<input value="" data-validation-engine="validate[required]" class="text-input" type="text" name="req" id="req" />
71+
</label>
72+
<label>
73+
<span>ID Custom Error ('#number')</span>
74+
<input value="0" data-validation-engine="validate[required,min[1]]" data-validation-placeholder="This is a placeholder" class="text-input" type="number" name="reqplaceholder" id="number" />
75+
</label>
76+
<label>
77+
<span>Class Custom Error ('.class_req'):</span>
78+
<input value="" data-validation-engine="validate[required]" class="class_req text-input" type="text" name="class_req" />
79+
</label>
80+
81+
</fieldset>
82+
83+
<fieldset>
84+
<legend>
85+
Custom
86+
</legend>
87+
<label>
88+
<span>All Three: </span>
89+
<input value="http://" data-validation-engine="validate[required,custom[url]]" class="class_url text-input" type="text" name="url" id="url" />
90+
</label>
91+
</fieldset>
92+
<input class="submit" type="submit" value="Validate &amp; Send the form!"/><hr/>
93+
</form>
94+
</body>
95+
</html>

‎js/jquery.validationEngine.js

Lines changed: 85 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -480,10 +480,10 @@
480480

481481
case "required":
482482
required = true;
483-
errorMsg = methods._required(field, rules, i, options);
483+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._required);
484484
break;
485485
case "custom":
486-
errorMsg = methods._custom(field, rules, i, options);
486+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._custom);
487487
break;
488488
case "groupRequired":
489489
// Check is its the first of group, if not, reload validation with first field
@@ -494,9 +494,9 @@
494494
methods._validateField(firstOfGroup, options, skipAjaxValidation);
495495
options.showArrow = true;
496496
continue;
497-
};
498-
errorMsg = methods._groupRequired(field, rules, i, options);
499-
if(errorMsg) required = true;
497+
}
498+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._groupRequired);
499+
if(errorMsg) required = true;
500500
options.showArrow = false;
501501
break;
502502
case "ajax":
@@ -507,16 +507,16 @@
507507
}
508508
break;
509509
case "minSize":
510-
errorMsg = methods._minSize(field, rules, i, options);
510+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._minSize);
511511
break;
512512
case "maxSize":
513-
errorMsg = methods._maxSize(field, rules, i, options);
513+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._maxSize);
514514
break;
515515
case "min":
516-
errorMsg = methods._min(field, rules, i, options);
516+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._min);
517517
break;
518518
case "max":
519-
errorMsg = methods._max(field, rules, i, options);
519+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._max);
520520
break;
521521
case "past":
522522
errorMsg = methods._past(form, field, rules, i, options);
@@ -550,21 +550,21 @@
550550
options.showArrow = false;
551551
break;
552552
case "maxCheckbox":
553-
errorMsg = methods._maxCheckbox(form, field, rules, i, options);
553+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._maxCheckbox);
554554
field = $(form.find("input[name='" + fieldName + "']"));
555555
break;
556556
case "minCheckbox":
557-
errorMsg = methods._minCheckbox(form, field, rules, i, options);
557+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._minCheckbox);
558558
field = $(form.find("input[name='" + fieldName + "']"));
559559
break;
560560
case "equals":
561-
errorMsg = methods._equals(field, rules, i, options);
561+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._equals);
562562
break;
563563
case "funcCall":
564-
errorMsg = methods._funcCall(field, rules, i, options);
564+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._funcCall);
565565
break;
566566
case "creditCard":
567-
errorMsg = methods._creditCard(field, rules, i, options);
567+
errorMsg = methods._getErrorMessage(form, field, rules[i], rules, i, options, methods._creditCard);
568568
break;
569569

570570
default:
@@ -587,8 +587,8 @@
587587
}
588588

589589
if(field.is(":hidden") && options.prettySelect) {
590-
field = form.find("#" + options.usePrefix + field.attr('id') + options.useSuffix);
591-
}
590+
field = form.find("#" + options.usePrefix + field.attr('id') + options.useSuffix);
591+
}
592592

593593
if (options.isError){
594594
methods._showPrompt(field, promptText, "", false, options);
@@ -611,6 +611,74 @@
611611

612612
return options.isError;
613613
},
614+
/********************
615+
* _getErrorMessage
616+
*
617+
* @param form
618+
* @param field
619+
* @param rule
620+
* @param rules
621+
* @param i
622+
* @param options
623+
* @param originalValidationMethod
624+
* @return {*}
625+
* @private
626+
*/
627+
_getErrorMessage:function (form, field, rule, rules, i, options, originalValidationMethod) {
628+
// If we are using the custon validation type, build the index for the rule.
629+
// Otherwise if we are doing a function call, make the call and return the object
630+
// that is passed back.
631+
if (rule == "custom") {
632+
var custom_validation_type_index = rules.indexOf(rule) + 1;
633+
var custom_validation_type = rules[custom_validation_type_index];
634+
rule = "custom[" + custom_validation_type + "]";
635+
}
636+
var id = field.context.attributes.id.nodeValue;
637+
var element_classes = field.context.attributes['class'].nodeValue;
638+
var element_classes_array = element_classes.split(" ");
639+
var custom_message = methods._getCustomErrorMessage(id, element_classes_array, rule, options);
640+
641+
// Call the original validation method. If we are dealing with dates, also pass the form
642+
var errorMsg;
643+
if (rule == "future" || rule == "past") {
644+
errorMsg = originalValidationMethod(form, field, rules, i, options);
645+
} else {
646+
errorMsg = originalValidationMethod(field, rules, i, options);
647+
}
648+
649+
// If the original validation method returned an error and we have a custom error message,
650+
// return the custom message instead. Otherwise return the original error message.
651+
if (errorMsg != undefined && custom_message) {
652+
return custom_message;
653+
}
654+
return errorMsg;
655+
656+
},
657+
_getCustomErrorMessage:function (id, classes, rule, options) {
658+
var custom_message = false;
659+
id = '#' + id;
660+
// If we have custom messages for the element's id, get the message for the rule from the id.
661+
// Otherwise, if we have custom messages for the element's classes, use the first class message we find instead.
662+
if (typeof options.custom_error_messages[id] != "undefined" &&
663+
typeof options.custom_error_messages[id][rule] != "undefined" ) {
664+
custom_message = options.custom_error_messages[id][rule]['message'];
665+
} else if (classes.length > 0) {
666+
for (var i = 0; i < classes.length && classes.length > 0; i++) {
667+
var element_class = "." + classes[i];
668+
if (typeof options.custom_error_messages[element_class] != "undefined" &&
669+
typeof options.custom_error_messages[element_class][rule] != "undefined") {
670+
custom_message = options.custom_error_messages[element_class][rule]['message'];
671+
break;
672+
}
673+
}
674+
}
675+
if (!custom_message &&
676+
typeof options.custom_error_messages[rule] != "undefined" &&
677+
typeof options.custom_error_messages[rule]['message'] != "undefined"){
678+
custom_message = options.custom_error_messages[rule]['message'];
679+
}
680+
return custom_message;
681+
},
614682
/**
615683
* Required validation
616684
*
@@ -1633,6 +1701,7 @@
16331701

16341702
// Used when you have a form fields too close and the errors messages are on top of other disturbing viewing messages
16351703
doNotShowAllErrosOnSubmit: false,
1704+
custom_error_messages:{},
16361705

16371706
// true if you want to vind the input fields
16381707
binded: true,

0 commit comments

Comments
 (0)