Confirm Password with jQuery Validate
JqueryJquery ValidateJquery Problem Overview
I'm trying to use jQuery validate plugin to confirm my password entry.
However, I don't want it to be a required field.
Just IF a user wants to change the password, they would need to confirm it.
If not, both fields shouldn't be validated.
jQuery('.validatedForm').validate({
rules: {
password: {
required: true,
minlength: 5
},
password_confirm: {
required: true,
minlength: 5,
equalTo: "#password"
}
}
});
This is working perfectly, but again, both fields are required.
I would like to have this optional, in case someone just wants to change for instance their email or username and leave the password alone.
Jquery Solutions
Solution 1 - Jquery
Remove the required: true
rule.
Demo: Fiddle
jQuery('.validatedForm').validate({
rules : {
password : {
minlength : 5
},
password_confirm : {
minlength : 5,
equalTo : "#password"
}
}
Solution 2 - Jquery
Just a quick chime in here to hopefully help others... Especially with the newer version (since this is 2 years old)...
Instead of having some static fields defined in JS, you can also use the data-rule-*
attributes. You can use built-in rules as well as custom rules.
See http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods for built-in rules.
Example:
<p><label>Email: <input type="text" name="email" id="email" data-rule-email="true" required></label></p>
<p><label>Confirm Email: <input type="text" name="email" id="email_confirm" data-rule-email="true" data-rule-equalTo="#email" required></label></p>
Note the data-rule-*
attributes.
Solution 3 - Jquery
It works if id value and name value are different:
<input type="password" class="form-control"name="password" id="mainpassword">
password: { required: true, } ,
cpassword: {required: true, equalTo: '#mainpassword' },
Solution 4 - Jquery
jQuery('.validatedForm').validate({
rules : {
password : {
minlength : 5
},
password_confirm : {
minlength : 5,
equalTo : '[name="password"]'
}
}
In general, you will not use id="password"
like this.
So, you can use [name="password"]
instead of "#password"
Solution 5 - Jquery
I'm implementing it in Play Framework and for me it worked like this:
-
Notice that I used data-rule-equalTo in input tag for the id inputPassword1. The code section of userform in my Modal:
2)Since I used validator within a Modal
$(document).on("click", ".createUserModal", function () {
$(this).find('#userform').validate({
rules: {
firstName: "required",
lastName: "required",
nationalId: {
required: true,
digits:true
},
email: {
required: true,
email: true
},
optradio: "required",
password :{
required: true,
minlength: 5
},
password2: {
required: true
}
},
highlight: function (element) {
$(element).parent().addClass('error')
},
unhighlight: function (element) {
$(element).parent().removeClass('error')
},
onsubmit: true
});
});
Hope it helps someone :).
Solution 6 - Jquery
<script>
$(document).ready(function(){
});
function login() {
var password = $("#psw").val()
var password1 = $("#psw1").val()
var pswlen = password.length;
if (pswlen < 8) {
alert('minmum 8 characters needed')
}
else {
if (password == password1) {
alert('continue');
window.location.replace("http://stackoverflow.com");
}
else {
alert('failed');
}
}
}
</script>