QuestionAsk Questions?
samar
Form validation Using Jquery Plugin
1 Answer(s) 2 years and 5 months ago
Posted in : JavaScript Questions
1 Answer(s) 2 years and 5 months ago
Posted in : JavaScript Questions
Hello sir
I want to implement form validation using JQuery Plug-in. My code is :
<html>
<style type="text/css">
* { font-family: Verdana; font-size: 11px; line-height: 14px; }
.submit { margin-left: 125px; margin-top: 10px;}
.label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
.form-row { padding: 10px 0; clear: both; width: 800px; }
label.error { width: 250px; display: block; float: left; padding-left: 10px; }
input[type=text], textarea { width: 250px; float: left; }
textarea { height: 50px; }
</style>
</head>
<body>
<body>
<h3><font color="blue">Please enter the following information</font></h3>
<form method="post" action="">
<div class="form-row"><span class="label">Name *</span><input type="text" name="name" id="namei"/></div>
<div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" id="emaili"/></div>
<div class="form-row"><span class="label">URL</span><input type="text" name="url" id="urli" /></div>
<div class="form-row"><span class="label">Age</span><input type="text" name="quantity" id="quantity" /></div>
<div class="label.error" id="errmsg"></div>
<div class="form-row"><span class="label">Your comment *</span><textarea name="comment" id="commenti"></textarea></div>
<div class="form-row"><input class="submit" type="submit" value="Submit" name="submit" id="submiti"></div>
</form>
</body>
</html>
Please provide me JQuery code regarding above code ASAP.
View Answers
December 15, 2010 at 12:41 PM
First you need to download jquery.validate.js plugin. Here is the code according to your description :
<script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript">
$(document).ready(function(){
//called when key is pressed in textbox $("#quantity").keypress(function (e) { $("#errmsg").hide(); //if the letter is not digit then display error and don't type anything if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) { //display error message $("#errmsg").html(" Digits Only").show();
return false;
} }); $('#quantity').blur(function(a) { if((parseInt($("#quantity").val(), 10)<18)) {
$("#errmsg").html(" Age must be greater than 18").show();
} if((parseInt($("#quantity").val(), 10)>35)) {
$("#errmsg").html(" Age must be less than 35").show(); } });
//FOR EMAIL ADDRESS $("#form").validate({
rules: {
name: "required",// simple rule, converted to {required:true}
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
}); }); </script>
Related Pages:
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Tutorial Topics
