i am trying to provide client side validation for password using jquery, but the form gets submitted without validating. i am new to jquery as well.
what i am trying here
1)checking for the password fields, should be not null
2)comparing both the passwords.
but the form gets submitted, and i could not find the error.
Please help
<!DOCTYPE HTML>
<html>
<head>
<title>Form Example</title>
<script type="text/javascript" src="jquery-1.7.1.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" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
//onkeyup: false;
debug: true;
rules: {
password: {
required: true,
minlength: 6,
maxlength: 12,
password: true
},
password1: {
required: true,
equalTo: "#password"
}
},
messages: {
password: {
required: "req",
minlength: "min",
maxlength: "max"
}
password1: {
required: "req re",
equalTo: "not equal"
}
}
});
});
</script>
<style>
label.error { width: 250px; display: inline; color: red;}
</style>
</head>
<body>
<form name="myform" id="myform" action="" method="POST">
<label for="password">Choose a password</label>
<input type="text" name="password" id="password" value="" />
<label for="password" generated="true" class="error"></label>
<br/>
<label for="password1">Retype password</label>
<input type="text" name="password1" id="password1" value="" />
<label for="password1" generated="true" class="error"></label>
<br/>
<input type="submit" value="join" />
<input type="submit" value="cancel" class="cancel" />
</form>
</body>
</html>
Make the following changes to your validate function and it’ll work fine
1) Remove the line
debug: true;2) You have missed a comma in the messages section. Add a comma to after the first message, as follows…