Validation Messages for Form Fields with jQuery

Posted by jcargoo | Tuesday, April 7, 2009
| 0Delicious Twitter Reddit Digg Loading...


Validation hints are useful for any kind of form. It is useful because the user remains aware about the validation of the field criteria he is trying to fill in.
This post is about showing you how to create this kind of feedback using jQuery and

CSS.









Let’s go through the code.

General behavior:

HTML

<input
type="XXYY"
id="XXXX"/>
<span class="message">XXXX message.</span>

Since any input element receives focus either via the pointing device or by tabbing navigation, the focus event fires and executes following function:

$("input").focus( function() {$(this).parent().find("span.message").css("display", "inline");});

This means that we will display the message inside the span element.

When any input element loses focus either via the pointing device or by tabbing navigation, the following function will be executed:

$("input").blur( function() {$(this).parent().find("span.message").css("display", "none");});

This means that we will hide the message inside the span element.

The span message will be displayed following its CSS class definition:

span.message {
display:none;
position:absolute;
font:normal 11px/14px verdana;
width:250px;
margin: -12px 0 0 14px;
padding:5px 5px 5px 40px;
border: 1px solid #9F6000;
background-repeat: no-repeat;
background-position: 10px center;
color: #4F8A10;
background-color: #FEEFB3;
background-image:url('warning.png');
}

Username:

jQuery:

$("#username").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if (text.length > 7) {
fieldset.addClass("done");
}
else {
fieldset.removeClass("done");
}
});

  • We merely check the length of the value entered in the username field when the keyup event is triggered;
  • If it is okay (text length value is higher than 8), we apply the CSS class “done” and if not, the warning message “span.message” remains applied.

CSS:

fieldset.done span.message {
border: 1px solid #4F8A10;
background-repeat: no-repeat;
background-position: 10px center;
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
Password and Password confirmation:

jQuery:

$("#password").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if (text.length > 3 && text.length <> 7) {
fieldset.removeClass("almostgood");
fieldset.addClass("done");
} else {
fieldset.removeClass("almostgood");
fieldset.removeClass("done");
}
});

$("#password1").keyup( function() {
var fieldset = $(this).parent();
var text = $(this).val();
if(text!=$("#password").val() && jQuery.trim($("#password").val())!=""){
$("#passwordok").css("display", "none");
$("#passwordnok").css("display", "inline");
}
else{
if(text==$("#password").val()){
$("#passwordnok").css("display", "none");
$("#passwordok").css("display", "inline");
}
if(jQuery.trim($("#password").val())==""){
$("#passwordnok").css("display", "none");
$("#passwordok").css("display", "none");
}
}
});

  • If we find that the password is at least 4 characters long, this can be good enough to continue. Then the “almostgood” CSS class will be applied;
  • If the password is at least 8 characters long, that's very good and the “done” CSS class will be applied in this case;
  • The second keyup event above concerns password comparing. In case of #password and #password1 values are the same; “passwordok” CSS class will be applied. In the opposite case, it is CSS class “passwordnok”.
CSS:

fieldset.done span.message {
border: 1px solid #4F8A10;
background-repeat: no-repeat;
background-position: 10px center;
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}

fieldset.almostgood span.message {
border: 1px solid #9F6000;
background-repeat: no-repeat;
background-position: 10px center;
color: #4F8A10;
background-color: #FEEFB3;
background-image:url('almostgood.png');
}

#passwordnok{
font:normal 11px/14px verdana;
width:250px;
position:absolute;
margin: -12px 0 0 14px;
padding:5px 5px 5px 40px;
border: 1px solid #9F6000;
background-repeat: no-repeat;
background-position: 10px center;
color: #4F8A10;
background-color: #FEEFB3;
background-image:url('passnok.png');
display:none;
}

#passwordok{
font:normal 11px/14px verdana;
width:250px;
position:absolute;
margin: -12px 0 0 14px;
padding:5px 5px 5px 40px;
border: 1px solid #9F6000;
background-repeat: no-repeat;
background-position: 10px center;
color: #4F8A10;
background-color: #FEEFB3;
background-image:url('passok.png');
display:none;
}

Email:

jQuery:

$("#email").keyup( function() {
var fieldset = $(this).parent();
var text = jQuery.trim($(this).val());
if (text.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
fieldset.addClass("done");
} else {
fieldset.removeClass("done");
}
});

  • We simply use regular expressions to validate the e-mail field.

That’s all guys.



How to encourage this blog if you like it:
  • Promote our sponsors;
  • Add any kind of comment or critic;
  • Ask me directly by email if you prefer.
Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.




Share this post ?

Digg Reddit Stumble Delicious Technorati Twitter Facebook

2 Previous Comments
  1. developer | April 12, 2009 at 1:46 AM  

    In the "else" condition of $("#password").keyup, you can put fieldset.removeClass("almostgood"); only before doing the second "if" because it is common. This is in order to avoid redundancy. Otherwise the code is perfectly done. Thanks for sharing, your blog is interesting so please keep working hard to share this kind of great work.

  2. loic | April 13, 2009 at 12:39 AM  

    Hello jcargoo, may be you have to call this "validation hints" instead of "validation messages".