24 Dec
This based on standard jquery validate plugin. If you want to display all error in one container on your html page
Create a Html form and a error container div. For example
<div id=”errorContainer”>
<p>Please correct the following errors and try again:</p>
<ul />
</div>
<div>
<form id=”simpleForm” method=”post”>
<p>
<label for=”firstName”>First Name:</label>
<input id=”firstName” name=”firstName”></input>
</p>
<p>
<label for=”lastName”>Last Name:</label>
<input id=”lastName” name=”lastName”></input>
</p>
<p>
<label for=”age”>Age:</label>
<input id=”age” name=”age”></input>
</p>
<p>
<input type=”submit” value=”Submit” />
</p>
</form>
</div>
Here i am using two din. In first one i will show all jquery validation error and in second div i have my form for validation.
Now apply some css to make error visibility.
<style type=”text/css”>
div {
background-color: #FFF;
border: 1px solid #A8A8A8;
padding: 0.5em;
margin-bottom: 1em;
}
input {
font-family: Georgia, “Times New Roman”, Times, Serif;
}
label {
width: 10em;
float: left;
}
p {
clear: both;
}
#errorContainer {
display: none;
overflow: auto;
background-color: #FFDDDD;
border: 1px solid #FF2323;
padding-top: 0;
}
#errorContainer label {
float: none;
width: auto;
}
input.error {
border: 1px solid #FF2323;
}
</style>
In header part include required jquery library and validation jquery like
<script type=”text/javascript” src=”jquery-1.7.2.min.js”></script>
<script type=”text/javascript” src=”jquery.validate.min.js”></script>
Now main script part
<script type=”text/javascript”>
$(function(){
$(‘#simpleForm’).validate({
rules: {
firstName: “required”,
lastName: “required”,
age: {
required: true,
range: [18,70]
}
},
messages: {
firstName: “Please enter your first name.”,
lastName: “Please enter your last name.”,
age: {
required: “Please enter your age.”,
range: “Your age must be between 18 and 70.”
}
},
[highlight background=”” color=””]errorContainer: $(‘#errorContainer’),
errorLabelContainer: $(‘#errorContainer ul’),
wrapper: ‘li'[/highlight]
});
});
</script>
In above script i am binding simple validation but adding extra line of code which is defining my “errorContainer”
I am a software engineer who specializes in Internet applications. I have worked with a wide variety of technologies and programming languages to open source LAMP environments. I have more than 6 years of object-oriented programming experience and am highly proficient in ActionScript, PHP, MYSQL, JavaScript, Jquery and a multitude of other technologies used in modern web applications.
Latest posts by Rajeev Achra (see all)
- Jquery webcam plugin - June 19, 2016
- How To Add and Delete Users on a CentOSServer - June 5, 2016
- How To Set Up vsftpd on CentOS 6 - June 5, 2016