This article explains how to display client side validation errors in web page instead of the classical alert message using Jquery. The working is based on a error message div element. The error messages is added to it, if any, along with a change in background color.
The below code validates two fields email address and confirm email address. The example does not check for validity of email field. It just checks for empty string for the two fields. If both the fields are not empty, it just compares and displays a message telling that the two fields do not match.
<html>
<head>
<script type="text/javascript" src="/static/jquery-1.3.1.js"></script>
<script type="text/javascript">
//Gets called after the page is completely loaded
$(document).ready( function() {
$('input#submit').click(function(event){
$("div#errMsg").html("");
var email = $("input#email").val();
var confEmail = $("input#confEmail").val();
if(email!="" && confEmail!="") {
if(email!=confEmail) {
$("div#errMsg").css("background-color", "red");
$("div#errMsg").html("Confirm email does not match with email");
}
} else {
var errMsg = "<ul>";
if(email=="")
errMsg = errMsg+"<li>Please enter email address</li>";
if(confEmail=="")
errMsg = errMsg+"<li>Please enter confirm email</li>";
errMsg=errMsg+"</ul>";
$("div#errMsg").css("background-color", "red");
$("div#errMsg").html(errMsg);
}
});
});
</script>
</head>
<body>
<div><h2>Jquery Way of message display</h2></div>
<div id="errMsg"></div>
<div id="emailDiv">Email Address: <input type="text" id="email" name="email"/></div>
<div id="confEmailDiv">Confirm Email: <input type="text" id="confEmail" name="confirmEmail"/></div>
<div><input type="submit" name="submit" id="submit"/></div>
</body>
</html>The code purposely uses element.css() method for adding background color to the error div. Ideally, we should define a CSS class for the error state and add class using addClass method.
It also explains the element.html() method for injecting content between the div tags.