Form Field Validation Help

[coolshrimp]

currently I use javascript to check that certain fields are filled before form submits.is there a better more automated way to do it?i have it so if all fields are filled it shows a loading bar and hides the submit button so they cannot click it a million times.once .php is done it redirect to success/fail page.

function ShowLoader(){document.getElementById('buttons').style.display = 'none';document.getElementById('loader').style.display = 'block';}/******************************** Register Page ********************************/function validateRegister(){	if (document.forms["Register-Form"]["First_Name"].value=="")	{		alert("First Name Must Be Filled Out");		return false;	}	else if (document.forms["Register-Form"]["Last_Name"].value=="")	{		alert("Last Name Must Be Filled Out");		return false;	}	else if (document.forms["Register-Form"]["Company"].value=="")	{		alert("Company Must Be Filled Out");		return false;	}	else if (document.forms["Register-Form"]["Country"].value=="")	{		alert("Country Must Be Filled Out");		return false;	}	else if (document.forms["Register-Form"]["JobTitle"].value=="")	{		alert("Job Title Must Be Filled Out");		return false;	}	else if (document.forms["Register-Form"]["Email"].value=="")	{		alert("Email Must Be Filled Out");		return false;	}	else if (document.forms["Register-Form"]["Phone"].value=="")	{		alert("Telephone Be Filled Out");		return false;	}	else if (document.forms["Register-Form"]["Address1"].value=="")	{		alert("Address 1 Must Be Filled Out");		return false;	}	else if (document.forms["Register-Form"]["Address2"].value=="")	{		alert("Address 2 Must Be Filled Out");		return false;	}		ShowLoader();	return true;}

 

[justsomeguy]

You could define all of the field names and labels in an array so that you could loop through the array to test each field instead of duplicating all of that code. It would also be more user-friendly if you validated the entire form every time. Right now you stop after the first error. If there are 5 errors they will see the first error message, fix that, click the button again, see the next error message, fix that, etc. If it validated the entire form then they would see all error messages at once. You could use CSS to put a red border around invalid fields, for example, and maybe put an error message under each field. There are several ways to do that. You can also use the HTML5 required attribute on the fields to have the browser perform validation automatically if supported.

[coolshrimp]

yes what i really what is something simple say a field has the class "required"and i need it to automaticaly finds all form fields with that class and check themif theirs blank have a popup say go back and check field in red have red border around those fields.

 

i have multiple forms on multiple sites that i hate typing all the name fields and i don't want to have to add the name to an array like you suggested as i have 10+ forms and some have 30+ fields being filled out.id rather add the class to the input box and have it search and flag on submit.

[dsonesuk]

You don't need to create a array, just use form elements http://www.w3schools.com/jsref/coll_form_elements.asp then loop through each form element, identify if it has required class name and validate value.