when i submit it directly goes to the targeted page in form action. no validation happens.
My form
<form id="RegisterForm" method="post" action="register.php">
..
..
<input type="submit" value="Register Now" class="button">
</form>
My Ajax code validation.js
$(document).ready(function () {
$('#RegisterForm').validate({
rules: {
name: "required",
surname: "required",
address: "required",
nic: "required",
email: {
required: true,
email: true
},
phone: "required",
gfname: "required",
gsurname: "required",
gaddress: "required",
gphone: "required"
},
messages: {
name: "Please enter your name",
surname: "Please enter Your Surname",
address: "Please enter Address",
nic: "Please enter ID card Number",
email: "Please enter a valid email address"
},
// if success
submitHandler: function (form) {
$.post("register.php",$(form).serialize());
$('#RegisterForm').fadeOut("slow");
}
});
return false;
});
Imported files
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
I'am new to bootstrap and ajax. so in your answers please mention what files i should import to trigger ajax validation.
You could try organizing your script tags like this:
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
However if that does not work could you make sure that all your IDs match those that are in the rules sections. Also have you checked your console for any errors to make sure that javascript isn't throwing anything?
You need to simplify your example as much as you can to find problem.
Example below works fine:
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
<script type="application/javascript">
$(function () {
$('#RegisterForm').validate({
rules: {
name: "required"
},
messages: {
name: "Please enter your name"
},
// if success
submitHandler: function (form) {
$.post("index.php", $(form).serialize());
$('#RegisterForm').fadeOut("slow");
}
});
});
</script>
</head>
<body>
<form id="RegisterForm" method="post" action="">
<input type="text" name="name">
<input type="submit" value="Register Now" class="button" name="zzz">
</form>
</body>
</html>