Confirm Password with jQuery Validate

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.

260230 次浏览
小开
最佳答案

Remove the required: true rule.

Demo: Fiddle

jQuery('.validatedForm').validate({
rules: {
password: {
minlength: 5,
},
password_confirm: {
minlength: 5,
equalTo: "#password"
}
}
});
小开

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.

小开

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' },
小开 
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"

小开

I'm implementing it in Play Framework and for me it worked like this:

  1. Notice that I used data-rule-equalTo in input tag for the id inputPassword1. The code section of userform in my Modal:
<div class="form-group">
<label for="pass1">@Messages("authentication.password")</label>
<input class="form-control required" id="inputPassword1" placeholder="@Messages("authentication.password")" type="password" name="password" maxlength=10 minlength=5>
</div>
<div class="form-group">
<label for="pass2">@Messages("authentication.password2")</label>
<input class="form-control required" data-rule-equalTo="#inputPassword1" id="inputPassword2" placeholder="@Messages("authentication.password")" type="password" name="password2">
</div>
  1. 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 :).

小开 
<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>

提交答案