Validation Messages for Form Fields with jQuery

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.

View Demo

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.

Download here

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 ?

---