Using Bootstrap Tooltips to display jQuery Validation error messages
While working on the form validation we find few issues in displaying the errors to be displayed. When error is displayed few jumping’s on the screen happens which is awkward as a part of UI.
Jquery validation is always simple and helps in rapid development of applications as it goes with the forms also. There are many ways to display validation errors but I found Bootstrap tooltips to dispaly error messages using jquery validation is more appropriate without disturbing the user interface of the application.
In this tutorial jQuery UI in place and jQuery UI tooltip is in use. This example will use the Bootstrap tooltip instead. As much as anything else this demonstrates that you could swap out the tooltip mechanism here with any of your choosing. The plugin provides visually appealing prompts that grab user attention on the subject matter.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
form { padding: 10px; }
.error { border: 1px solid #b94a48!important; background-color: #fee!important; }
</style>
</head>
<body>
<form>
<div class="row">
<label for="RequiredDateDemo">A date is required (eg "15 June 2012"):</label>
<input
data-msg-date="The field RequiredDateDemo must be a date."
data-msg-required="The RequiredDateDemo field is required."
data-rule-date="true"
data-rule-required="true"
id="RequiredDateDemo" name="RequiredDateDemo" type="text" value="" />
</div>
<div class="row">
<label for="StringLengthAndRequiredDemo">A string is required between 5 and 10 characters long:</label>
<input
data-msg-maxlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10."
data-msg-minlength="The field StringLengthAndRequiredDemo must be a string with a minimum length of 5 and a maximum length of 10."
data-msg-required="The StringLengthAndRequiredDemo field is required."
data-rule-maxlength="10"
data-rule-minlength="5"
data-rule-required="true"
id="StringLengthAndRequiredDemo" name="StringLengthAndRequiredDemo" type="text" value="" />
</div>
<div class="row">
<label for="RangeAndNumberDemo">Must be a number between -20 and 40:</label>
<input
data-msg-number="The field RangeAndNumberDemo must be a number."
data-msg-range="The field RangeAndNumberDemo must be between -20 and 40."
data-rule-number="true"
data-rule-range="[-20,40]"
id="RangeAndNumberDemo" name="RangeAndNumberDemo" type="text" value="-21" />
</div>
<div class="row">
<label for="RangeAndNumberDemo">An option must be selected:</label>
<select
data-msg-required="The DropDownRequiredDemo field is required."
data-rule-required="true"
id="DropDownRequiredDemo" name="DropDownRequiredDemo">
<option value="">Please select</option>
<option value="An Option">An Option</option>
</select>
</div>
<div class="row">
<button type="submit">Validate</button>
</div>
</form>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery.validate/1.11.1/jquery.validate.js" type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("form").validate({
showErrors: function(errorMap, errorList) {
// Clean up any tooltips for valid elements
$.each(this.validElements(), function (index, element) {
var $element = $(element);
$element.data("title", "") // Clear the title - there is no error associated anymore
.removeClass("error")
.tooltip("destroy");
});
// Create new tooltips for invalid elements
$.each(errorList, function (index, error) {
var $element = $(error.element);
$element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
.data("title", error.message)
.addClass("error")
.tooltip(); // Create a new tooltip based on the error messsage we just set in the title
});
},
submitHandler: function(form) {
alert("This is a valid form!");
}
});
</script>
</body>
</html>
|
Using Bootstrap Tooltips to display jQuery Validation error messages
![Using Bootstrap Tooltips to display jQuery Validation error messages]()
Reviewed by BloggerSri
on
6:42 AM
Rating:
1 comment:
There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me.
SEO Company in Chennai
Post a Comment