i'm testing a password confirmation validation. when im using this code with variables, it doesn't work:
$(function() {
var pass1 = $("#reg-password").val(),
pass2 = $("#reg-password2").val();
$("#reg-password2").blur(function(){
if (pass1 != pass2){
alert ('Doesnt Match');
}
});
});
But this one works, why?
$(function() {
$("#reg-password2").blur(function(){
if ($("#reg-password2").val() != $("#reg-password").val()){
alert ('Doesnt Match');
}
});
});
because the values of pass1 and pass2 variable assigned at the time of ready document. If you want to use the variable the use it
$(function() {
$("#reg-password2").blur(function(){
var pass1 = $("#reg-password").val(),
pass2 = $("#reg-password2").val();
if (pass1 != pass2){
alert ('Doesnt Match');
}
});
});
At the first code, your pass1 and pass2 contains values of document ready, any changes entered are not using to compare at the time pass2 blurs.
2nd code, the passwords are getting at the time that pass2 blurs, so it works.
$(function() {
$("#reg-password2").blur(function(){
pass1 = $("#reg-password").val(),
pass2 = $("#reg-password2").val();
if (pass1 != pass2){
alert ('Doesnt Match');
}
});
});
In the first code you get the values before you blur, in the second one you get them when you blur
It is because the input fields are not existing in the DOM, at the moment when you write
var pass1 = $("#reg-password").val(),
pass2 = $("#reg-password2").val();
You could put it in an onload or on domReady event, then your first code should work.
$(function() {...}); is shorthand for $(document).ready(function() {...});.is because the variables refers to the initial values of the inputs... and the validation is done when the 'blur' event is triggered. If the values of the inputs changed, you should reassign the variables.
You can use really nice jQuery plugin, which does (almost) any type of validation, it is called jQuery plugin Validation (http://bassistance.de/jquery-plugins/jquery-plugin-validation/). I use it since the beginning of his development and it is powerful and easy to use, like this:
function validateForm(myForm) {
$('#'+myform).validate({rules: {
name: {required:true},
password: {required: true},
repeat_password: {required: true, equalTo:"#password"}
}});
}
Just pass as agruments names/id's of the fields. You also can define your own error messages for required fields if you want, otherwise the default ones are in English.
