ErrorTip 1.0 – error messages for html forms
January 22, 2011 at 4:11 am | Blog, Javascript, jQuery, Plugins | No comment
I’ve been writing a lot of HTML forms and jQuery validation routines lately at work. I have found that writing validation routines are pretty easy and since forms often vary in content I end up writing new routines each time. However, I have noticed that, no matter the contents of the form, I always need a way to alert the user when a form field is invalid.
A simple red border around the input field or text area can often do the trick, but what happens when the error needs a little bit more explaining?
Javascirpt alert() messages are FAR from the answer; those things are just plain annoying, so usually I head for a hidden <div> after each input that I can then fill with an error message and change the div to visible.
The problem with this is it requires a lot of extra html elements and ID’s that one has to take care of. To solve this problem, I created a simple error tip as a jQuery plugin. It’s really simple to implement and can be easily styled in CSS.
Demo
Usage
- Include jQuery
- Include jquery.errortip.js
and jquery.errortip.css
Example
<button onclick="showError()">Show Error</button>
<input type="text" id="my_form_field" />
<script>
function showError(){
$('#my_form_field').errortip('My error message here');
}
</script>
Future
I plan to continue adding to the plugin overtime and will update this post when necessary. For now, have fun displaying error messages with ease!
Don’t forget, if you have any ideas for the plugin or find bugs, please post them in the comments below.
Happy coding!