Menu
Here is what I am currently using to attempt to validate a form. When I press submit with no values entered into the form, I get the error messages for each of the inputs as expected. However, no matter what I put in newpassword2 or newemail2 they never 'pass' validation. I've tried everything from copy and paste to making them one letter each to no success. Perhaps I am not using the equalTo attribute correctly...
I've also verified that all the names of the selectors agree with the input id's on the form. Also, all of the inputs are contained within the form, so there aren't any outside of the form tags (I read that was an issue with someone else).
$(document).ready(function() {
$("#account_data").validate({
rules: {
newpassword1: { required: true },
newpassword2: { equalTo: "#newpassword1" },
newemail1: { required: true, email: true },
newemail2: { equalTo: "#newemail1" }
}
});
});
226
If you will use id="password" it won't work. You must use another name for id.
All keys in the rules object refer to the input.name and not input.id
109
Before using "equalTo" we need to take care of following points:
Use different word for input element name and id.
Use input element id in "equalTo" match instead of input element name:
<html>
<head>
<title></title>
<script src="jquery-1.12.0.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$('#btnSubmit').click(function(){
$("form").validate({
rules: {
pwd: {
required: true,
minlength : 6
},
conf_pwd: {
required: true,
minlength : 6,
equalTo: "#id_pwd"
}
},
messages: {
pwd: {
required: "Please enter the password.",
minlength: "Your password must be at least 6 characters long"
},
conf_pwd: {
required: "Please enter the confirm password.",
minlength: "Your password must be at least 6 characters long",
equalTo: "Please enter the same password as above"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
});
</script>
</head>
<body>
<div>
<form id="data" action="" method="post">
<div class="form-group row">
<label>Password:</label>
<div>
<input id="id_pwd" name="pwd" type="password" />
</div>
</div>
<div>
<label>Confirm Password:</label>
<div>
<input id="id_conf_pwd" name="conf_pwd" type="password" />
</div>
</div>
<div>
<div>
<div>
<input type="submit" id="btnSubmit" name="submit" value="Reset Password">
</div>
</div>
</div>
</form>
</div>
</body>
</html>I had the same problem as Tom. The solution was to create an id for the password fields that matched the names for the password fields. (As mentioned by Tom). Definitely a bug in the validation code, because it should just rely on the name field. Oh well...
-Greg
33
@Tom try
newpassword1: { required: true },
newpassword2: { required: true,equalTo: "#newpassword1"},
newemail1: { required: true, email: true },
newemail2: { required: true,email: true ,equalTo: "#newemail1" }
or use the latest version of validation plugin
Now rules have added with password being required set to true and the second condition is for password_again set to required true and it has to “equalTo” the input field with id of password. With these conditions set, we are able to achieve what we are wanting. Do not forget to check the demo of the post to see how it works. For more documentation and resource on this plugin visit jQuery Validation Plugin
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
