Form Validation

[jamesjmann]

This is my first ever javascript script for form validation.

 

I got it to work rather nicely, if I say so myself, however, there are a couple problems I can't seem to fix.

 

Here's the code:

<script language="javascript">
/*//Form Validation: Registration
//<![CDATA[
function check_form() {

var valid = true;

/*------------------------------------
--------------------------------------
-------------Error Trapping-----------
--------------------------------------
------------------------------------*/
//Name
if (document.registration_form.name.value == "") {
	var div_blank = document.getElementById("name_blank");
	div_blank.style.display = "inline";
	valid = false;
	document.registration_form.name.className = "invalid_form";
}
if (document.registration_form.name.value.length < 5) {
	var div_min = document.getElementById("name_min");
	div_min.style.display = "inline";
	valid = false;
	document.registration_form.name.className = "invalid_form";
}
if (document.registration_form.name.value.length > 15) {
	var div_max = document.getElementById("name_max");
	div_max.style.display = "inline";
	valid = false;
	document.registration_form.name.className = "invalid_form";
}
if (document.registration_form.name.value != "" && document.registration_form.name.value.length > 5 && document.registration_form.name.value.length < 15) {
	document.registration_form.name.className = "valid_form";	
}

//Birthdate
if (document.registration_form.bd_month.value == "Month") {
	var div_blank_bdm = document.getElementById("bdm_blank");
	div_blank_bdm.style.display = "inline";
	valid = false;
	document.registration_form.bd_month.className = "invalid_form";
}
if (document.registration_form.bd_day.value == "Day") {
	var div_blank_bdd = document.getElementById("bdd_blank");
	div_blank_bdd.style.display = "inline";
	valid = false;
	document.registration_form.bd_day.className = "invalid_form";
}
if (document.registration_form.bd_year.value == "Year") {
	var div_blank_bdy = document.getElementById("bdy_blank");
	div_blank_bdy.style.display = "inline";
	valid = false;
	document.registration_form.bd_year.className = "invalid_form";
}
if (document.registration_form.bd_month.value != "Month" && document.registration_form.bd_day.value != "Month" && document.registration_form.bd_year.value != "Year") {
	document.registration_form.bd_month.className = "valid_form";	
	document.registration_form.bd_day.className = "valid_form";
	document.registration_form.bd_year.className = "valid_form";
}

//Country
if (document.registration_form.country.value == "Country") {
	var div_blank_cy = document.getElementById("country_blank");
	div_blank_cy.style.display = "inline";
	valid = false;
	document.registration_form.country.className = "invalid_form";
}
if (document.registration_form.country.value != "Country") {
	document.registration_form.country.className = "valid_form";	
}

//Region
if (document.registration_form.region.value == "") {
	var div_blank_rg = document.getElementById("region_blank");
	div_blank_rg.style.display = "inline";
	valid = false;
	document.registration_form.region.className = "invalid_form";
}
if (document.registration_form.region.value < 3) {
	var div_min_rg = document.getElementById("region_min");
	div_min_rg.style.display = "inline";
	valid = false;
	document.registration_form.region.className = "invalid_form";
}
if (document.registration_form.region.value > 26) {
	var div_max_rg = document.getElementById("region_max");
	div_max_rg.style.display = "inline";
	valid = false;
	document.registration_form.region.className = "invalid_form";
}

//Gender
if (document.registration_form.gender.value != "Male" && document.registration_form.gender.value != "Female") {
	var div_blank_gd = document.getElementById("gender_blank");
	div_blank_gd.style.display = "inline";
	valid = false;
}

//Email
if (document.registration_form.email.value == "") {
	var div_blank_em = document.getElementById("email_blank");
	div_blank_em.style.display = "inline";
	valid = false;
	document.registration_form.email.className = "invalid_form";
}
if (document.registration_form.email.value < 10) {
	var div_min_em = document.getElementById("email_min");
	div_min_em.style.display = "inline";
	valid = false;
	document.registration_form.email.className = "invalid_form";
}
if (document.registration_form.email.value > 30) {
	var div_max_em = document.getElementById("email_max");
	div_max_em.style.display = "inline";
	valid = false;
	document.registration_form.email.className = "invalid_form";
}

//Username
if (document.registration_form.username.value == "") {
	var div_blank_un = document.getElementById("username_blank");
	div_blank_un.style.display = "inline";
	valid = false;
	document.registration_form.username.className = "invalid_form";
}
if (document.registration_form.username.value < 10) {
	var div_min_un = document.getElementById("username_min");
	div_min_un.style.display = "inline";
	valid = false;
	document.registration_form.username.className = "invalid_form";
}	
if (document.registration_form.username.value > 15) {
	var div_max_un = document.getElementById("username_max");
	div_max_un.style.display = "inline";
	valid = false;
	document.registration_form.username.className = "invalid_form";
}

//Password
if (document.registration_form.password.value == "") {
	var div_blank_pw = document.getElementById("password_blank");
	div_blank_pw.style.display = "inline";
	valid = false;
	document.registration_form.password.className = "invalid_form";
}

//Confirm Password
if (document.registration_form.password_confirm.value == "") {
	var div_blank_pwCon = document.getElementById("passwordConfirm_blank");
	div_blank_pwCon.style.display = "inline";
	valid = false;
	document.registration_form.password_confirm.className = "invalid_form";
}

//Both Passwords
if (document.registration_form.password.value != document.registration_form.password_confirm.value) {
	var div_match_bpw = document.getElementById("bothPasswords_match");
	div_match_bpw.style.display = "inline";
	valid = false;
	document.registration_form.password.className = "invalid_form";
	document.registration_form.password_confirm.className = "invalid_form";
}

//Terms of Service
/*if (document.registration_form.tos.value != "Agreed") {
	var div_blank_tos = document.getElementById("tos_blank");
	div_blank_tos.style.display = "inline";
	valid = false;
}*/

return valid;

}
//]]>
</script>

 

Now, the first problem is, when two or more errors are found, the error messages DO display, but if you fix only one error and hit submit (javascript validation occurs on submit only), the text doesn't go away for that field. Also, I have it to where the classes on the forms themselves change (the colors change), depending on whether or not an error has been found. The problem with that, is I can't get it to change back to the first class after it gets fixed. So that's basically the two problems I have: 1. Getting the error message to disappear on submit. 2. Getting the class to change to "valid" state once the error's fixed.

 

SUMMARY: There are three classes for the forms.

 

1. default

2. valid

3. invalid

 

a. default is not included in the script, because it will never need to be changed back from another class

b. invalid is and works fine, but it gets stuck until ALL errors are fixed and you click submit

c. valid is in some places, because it works. i tried putting it in other places in the above script, but instead of the form getting disabled and showing errors, it actually submits to the external file and you only get a glimpse of the errors you didn't fix yet, and this really confuses me. How could it work in one place, but not the other? By "place", I am referring to the 'else' part of the if/else statements above. The first 2-4 if/else statements have else's, but when applying them to other if statements, the script breaks for some reason.

 

Help is welcome =)

 

EDIT: I apologize, the code to switch the classes to "valid" isn't in "else" clauses. I structured it so that if ALL types of error checks for the field is false, switch the class to "valid". Again, I tried doing this with other forms, but it doesn't seem to work and breaks the script.

 

Also, the code to hide the error msgs once errors are fixed isn't in the above script. I tried with all forms, by simply adding some code into the if statement (as described in the previous paragraph), but that broke the script for all fields.

[nogray]

You posted the part that works, but not the part that reset the class names. It's usually done with an if else statement (not sure what it didnt' work for you), but here is an example

if (document.registration_form.name.value == "") {
    document.getElementById("name_blank").style.display = "inline";
    valid = false;
    document.registration_form.name.className = "invalid_form";
}
else {
    document.getElementById("name_blank").style.display = "none";
    document.registration_form.name.className = "valid";
}

[jamesjmann]

You posted the part that works, but not the part that reset the class names. It's usually done with an if else statement (not sure what it didnt' work for you), but here is an example

if (document.registration_form.name.value == "") {
    document.getElementById("name_blank").style.display = "inline";
    valid = false;
    document.registration_form.name.className = "invalid_form";
}
else {
    document.getElementById("name_blank").style.display = "none";
    document.registration_form.name.className = "valid";
}

 

That's PRECISELY what I wrote, PRECISELY. But like I said, for some reason, it doesn't work for each if statement. It's really annoying.

 

[nogray]

Well, you would need to reset all the class names before you start validating the form, for example add "clear_errors()" in top of the validation to remove all the invalid classes. If you have a URL, I can help looking up the problem.

[jamesjmann]

Well, you would need to reset all the class names before you start validating the form, for example add "clear_errors()" in top of the validation to remove all the invalid classes. If you have a URL, I can help looking up the problem.

No i use my own server for now. I can post the entire scriPt on here for u to see though.