In this tutorial of php code for beginners we will look at jquery form validation with example.
<html>
<head>
<title>JQuery Form Validation</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate({
debug: false,
rules: {
name: "required",
dropdown: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please enter your good name.",
email: "Please enter your valid email address.",
dropdown: "Please select option from dropdown list.",
},
submitHandler: function(form) {
$.post('nextstep.php', $("#form1").serialize(), function(data) {
$('#result').html(data);
});
}
});
});
</script>
<style>
label.error { width: 250px; display: inline; color: red;}
</style>
</head>
<body>
<form name="form1" id="form1" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
Please Select the City:
<select name="dropdown" id="dropdown">
<option value="">None</option>
<option value="mumbai">Mumbai</option>
<option value="delhi">Delhi</option>
<option value="pune">Pune</option>
</select>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<!-- We will output the results from process.php here -->
<div id="result"><div>
</body>
</html>
Hope this php tutorial is useful for you. Keep following www.phpcodeforbeginner.blogspot.in for more help.
<html>
<head>
<title>JQuery Form Validation</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate({
debug: false,
rules: {
name: "required",
dropdown: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please enter your good name.",
email: "Please enter your valid email address.",
dropdown: "Please select option from dropdown list.",
},
submitHandler: function(form) {
$.post('nextstep.php', $("#form1").serialize(), function(data) {
$('#result').html(data);
});
}
});
});
</script>
<style>
label.error { width: 250px; display: inline; color: red;}
</style>
</head>
<body>
<form name="form1" id="form1" action="" method="POST">
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value=""/>
<br>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" size="30" value=""/>
<br>
Please Select the City:
<select name="dropdown" id="dropdown">
<option value="">None</option>
<option value="mumbai">Mumbai</option>
<option value="delhi">Delhi</option>
<option value="pune">Pune</option>
</select>
<br>
<input type="submit" name="submit" value="Submit">
</form>
<!-- We will output the results from process.php here -->
<div id="result"><div>
</body>
</html>
Hope this php tutorial is useful for you. Keep following www.phpcodeforbeginner.blogspot.in for more help.
How do you check for an integer? numer:true and digit true allow decimals
ReplyDeleteTo check integer validation you can use
Deleterules: {
age: {
required: true,
number: true
}
}
// Where age is name of your textbox
how to validate drop drow list
ReplyDeleteI have updated the code to also validate drop-down list...
Deletethanks..code is very simple and easy to understand...
ReplyDeleteYou are always welcome...:)
Deletegreat!!! thank u
ReplyDeleteWelcome...
Deletehi there awesome bit of code, and very easy to adapt but im trying to make it "check if a checkbox is ticked" at the end of the form.
ReplyDeletejust like agreeing to terms and condtions,
could you help?
I have already put an article for checking the multiple checkboxes using jquery. Here is the link for that
DeleteCheckbox validation using jquery
To check "CHECKBOX" validation you can add name of checkbox on rule field and appropriate message in message field in above code.
DeleteHere is an example:-
rules: {
name: "required",
dropdown: "required",
checkbox_name:"required",
}
messages: {
name: "Please enter your good name.",
email: "Please enter your valid email address.",
dropdown: "Please select option from dropdown list.",
checkbox_name: "Please select checkbox field.",
},
thank you that worked a charm, just one last issue with this validation script, it loads the next step under the form but i need it to redirect to a fresh page in its self
ReplyDelete$.post('nextstep.php', $("#form1").serialize(), function(data) {
$('#result').html(data);
what do i edit here?
You can remove the below code and put action page in your form.
Delete,submitHandler: function(form) {
$.post('jqueryvalidation.php', $("#form1").serialize(), function(data) {
$('#result').html(data);
});
}
the code work nice .i want to show the result on another page this code show the result on same page after the form code
DeleteThis comment has been removed by the author.
ReplyDeleteHi,
ReplyDelete$(document).ready(function(){
$("#zipform").validate({
debug: false,
rules: {
dropdown: "required",
zipcode: {
required: true,
number: true
},
email: {
required: true,
email: true
}
},
messages: {
zipcode: "Please enter your ZIP code.",
email: "Please enter your valid email address.",
dropdown: "Please select option from dropdown list.",
},
});
});
This is my code working fine, but i want ...
zipcode: {
required: true,
number: true
},
If zipcode is blank, its showing message
zipcode: "Please enter your ZIP code.",
but if it is Alphabetic character then it should say, fill numbers.....!
How i can do that ?
Thanks,
Arvind
Godd information about email validation..,
ReplyDeletekeep blogging.
you does it well i have tried it add this to your code messages:{
Deletezipcode:{
required: "Please enter your ZIP code.",
number: " fill numbers.....!"
},
}
how to required field than contains + and numbers only?
ReplyDeleteIs it possible to give minimal characters and/or maximum number of characters?
ReplyDelete