Javascript validation help

how to check if the passwords match

[phlogit]

Below is my JS code which checks all relevant and required validations on textfields in my form. This code is not all my own as i went through step by step tutorial to get it working and get a feel of how it runs. The only problem i have is i dont know how i can check if both password and passowrd2 fields are the same.

Note: I dont solely rely on JS validation and have a serverside back up. JS validation is merely used for speed, looks and to reduce the load on the server.

function validateFormOnSubmit(theForm) {
var reason = "";

reason += validateUsername(theForm.username);
reason += validatePassword(theForm.password);
reason += validatePassword2(theForm.password2);
reason += validateEmail(theForm.email);
reason += validateEmpty(theForm.zip);

if (reason!= "") {
alert("Please correct the fields below: \n" + reason);
return false;
}

alert("All fields are filled correctly");
return false;
}
function validateEmpty(fld) {
var error = "";

if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error = "Please enter a Post Code.\n"
} else if ((fld.value.length < 2) ¦¦ (fld.value.length > 6)) {
fld.style.background = 'Yellow';
error = "Your postcode is the wrong length.\n";
} else {
fld.style.background = 'White';
}
return error;
}
function validateUsername(fld) {
var error = "";
var illegalChars = /\W/; // allow letters, numbers, and underscores

if (fld.value == "") {
fld.style.background = 'Yellow';
error = "Please enter a username.\n";
} else if ((fld.value.length < 6) ¦¦ (fld.value.length > 11)) {
fld.style.background = 'Yellow';
error = "Please select a username between 6-11 characters.\n";
} else if (illegalChars.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The username contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}
function validatePassword(fld) {
var error = "";
var illegalChars = /[\W_]/; // allow only letters and numbers

if (fld.value == "") {
fld.style.background = 'Yellow';
error = "Please enter a password.\n";
} else if ((fld.value.length < 7) ¦¦ (fld.value.length > 15)) {
error = "Please select a password between 6-20 characters. \n";
fld.style.background = 'Yellow';
} else if (illegalChars.test(fld.value)) {
error = "The password contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
error = "The password must contain at least one number.\n";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
}
return error;
}
function validatePassword2(fld) {
var error = "";
var illegalChars = /[\W_]/; // allow only letters and numbers

if (fld.value == "") {
fld.style.background = 'Yellow';
error = "Please confirm your password.\n";
} else if ((fld.value.length < 7) ¦¦ (fld.value.length > 15)) {
error = "Please select a password between 6-20 characters. \n";
fld.style.background = 'Yellow';
} else if (illegalChars.test(fld.value)) {
error = "The password contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
error = "The password must contain at least one number.\n";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
}
return error;
}

function trim(s)
{
return s.replace(/^\s+¦\s+$/, '');
}
function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

if (fld.value == "") {
fld.style.background = 'Yellow';
error = "Please enter an email address.\n";
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = 'Yellow';
error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
fld.style.background = 'Yellow';
error = "The email address contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}
</script>

Any help is greatly appreciated in advance.

[DrDoc]

All you need to do is compare the two like this:

if(theForm.password!== theForm.password2) {
// they do not match
}

[phlogit]

function validatePassword2(fld) {
var error = "";
var illegalChars = /[\W_]/; // allow only letters and numbers

if (fld.value == "") {
fld.style.background = 'Yellow';
error = "Please confirm your password.\n";
} else if ((fld.value.length < 7) ¦¦ (fld.value.length > 15)) {
error = "Please select a password between 6-20 characters. \n";
fld.style.background = 'Yellow';
} else if (illegalChars.test(fld.value)) {
error = "The password contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
error = "The password must contain at least one number.\n";
fld.style.background = 'Yellow';
\\\tried this below
} else if(!(fld.value.match(theForm.password2))) {
error = "The password do not match.\n";
fld.style.background = 'Yellow';
\\\to here
} else {
fld.style.background = 'White';
}
return error;
}

I also tried it like dr doc said but it doesn't seem to work. I've got it working in my had, theory wise but am not sure if i need to place the code within the password2 function or create a new function. Any ideas or further guidance dr doc or anyone else for that matter?

Appreciate all help thanx.

[Trace]

change this line;
} else if(!(fld.value.match(theForm.password2))) {

to this;
} else if(fld.value!= document.YourFormName.password2) {

And change YourFormName to whatever it is you're using in the <form name="MyForm" action="index.html" method="post">

Also, your second password field must be named password2.

[edited by: Trace at 7:29 pm (utc) on July 25, 2007]

[phlogit]

Hi trace thank you very much for your reply but its till not working.

I tried what you said as follows

function validatePassword2(fld) {
var error = "";
var illegalChars = /[\W_]/; // allow only letters and numbers

if (fld.value == "") {
fld.style.background = 'Yellow';
error = "Please confirm your password.\n";
} else if ((fld.value.length < 6) ¦¦ (fld.value.length > 20)) {
error = "Please select a password between 6-20 characters. \n";
fld.style.background = 'Yellow';
} else if (illegalChars.test(fld.value)) {
error = "The password contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
error = "The password must contain at least one number.\n";
fld.style.background = 'Yellow';
} else if (fld.value!= document.register.password) {
error = "The password do not match.\n";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
}
return error;
}

so in the code above the line that you mentioned had been changed. I also called the form register as you showed. Everything still works but the error message saying "the passwords do not match" shows all the time when it gets to the password2 field, even though the password is right. By the way because i am validating the password2 field in the above code i had the if statement get the value of the password2 field as follows

fld.value

and then checked it against the password field like so

!= document.register.password

I think we are not far from the solution, bit more help pls what is wrong with the if statement.

All help very much appreciated.

[Trace]

My bad.

document.register.password

should be

document.register.password.value

If it's still not working after this, post the code for your form and I'll finish it up for you.

[edited by: Trace at 1:08 pm (utc) on July 26, 2007]

[phlogit]

Thank you very much trace it all works now.

Your help is very much appreciated.