Form Validation-how to add color in invalidate field

[dooballoh]

Hello.I've been searching for this so many days and could not found any.I'd like to have my form validation similar to Ajax "ValidatorCallout"1. When user left required field(s) left blank, then highlight the required field(s).2. Instead of alret popup, error message will show right next to required field, one at a time start from the first required field and as it fills in.This error message box shold have "close" function. I assume that using CSS.3. Although it's highlighted ALL required fields, and show the error message at the first required field,user might be left first field and click the second(or any other required field) field, then show the error message for that field.Error message could be able to up and down as user click whichever required field.Basically, I'd like to add just like how Ajax "ValidatorCallout" works.I have two basic validation codes. I can use either this;

if (!document.addform.title.value){	alert('Please specify the title.);	document.addform.title.focus();	return false;}

Or, I can use this;

function checkForm() {name = document.getElementById("name").value;email = document.getElementById("email").value;if (name == "") {hideAllErrors();document.getElementById("nameError").style.display = "inline";document.getElementById("name").select();document.getElementById("name").focus();return false;} else if (email == "") {hideAllErrors();document.getElementById("emailError").style.display = "inline";document.getElementById("email").select();document.getElementById("email").focus();return false;} return true;} function hideAllErrors() {document.getElementById("nameError").style.display = "none"document.getElementById("emailError").style.display = "none"}

Please help. I've been working really hard to find sources.Thank you in advance.

[jesh]

What if you set up your form something like this:

<form id="LoginForm" onsubmit="return validate();"><span id="UserNameError" style="display: none;">required</span><input type="text" id="UserName" onkeydown="hide('UserNameError');" /><br /><span id="PasswordError" style="display: none;">required</span><input type="password" id="Password" onkeydown="hide('PasswordError');" /><input type="submit" value="submit" /></form>

Then had javascript like this:

function hide(elementID){	var element = document.getElementById(elementID);	if(element)	{		element.style.display = "none";	}}function validate(){	var isValid = true;	if(document.getElementById("UserName").value == "")	{		document.getElementById("UserNameError").style.display = "inline";		isValid = false;	}	if(document.getElementById("Password").value == "")	{		document.getElementById("PasswordError").style.display = "inline";		isValid = false;	}	return isValid;}

[dooballoh]

Thank you very much jesh.It works just like the second set of code I've posted above.Except, it shows ALL error notes at once and hide as I type some in inputbox instead one at a time.What I've been looking for is that1. When user left required field(s) left blank, then highlight(for example: change color to lightyellow) the required field(s).Note: When required field is filled in change color back to "white"2. Instead of alret popup, error message will show right next to required field, one at a time start from the first required field and as it fills in.This error message box shold have "close" function. I assume that using CSS.3. Although it's highlighted ALL required fields, and show the error message at the first required field,user might be left first field and click the second(or any other required field) field, then show the error message for that field.Error message could be able to up and down as user click whichever required field.Basically, I'd like to add just like how Ajax "ValidatorCallout" works.At this point, this is the code and HTML and I'd like ADD fuctions above to it.Javascript;

function checkForm() {name = document.getElementById("name").value;email = document.getElementById("email").value;if (name == "") {hideAllErrors();document.getElementById("nameError").style.display = "inline";document.getElementById("name").select();document.getElementById("name").focus();return false;} else if (email == "") {hideAllErrors();document.getElementById("emailError").style.display = "inline";document.getElementById("email").select();document.getElementById("email").focus();return false;} return true;} function hideAllErrors() {document.getElementById("nameError").style.display = "none"document.getElementById("emailError").style.display = "none"}

HTML;

<form onSubmit="return checkForm();" method=post action="myscript.php"><span class=label>Name:</span><input type=text value="" id=name ><div class=error id=nameError>Required: Please enter your name<br></div><br><span class=label>Email:</span><input type=text value="" id=email ><div class=error id=emailError>Required: Please enter your email address<br></div><br><input type=submit value=Submit style="margin-left: 50px"></form>

PLESAE, PLEASE help!Thank you inadvance.

[jesh]

I don't think you need AJAX for this unless there is some data on the server that you need in order to validate the file. Javascript alone should suffice.What about using the focus and blur events on the inputs?1) Regarding switching the background color: First, set up all required fields so that the background color is yellow. Then, do something like this to make the field change from yellow to white when the user puts focus on the field and back to yellow if s/he leaves the field without typing in any data:

<input type="test" id="UserName" onfocus="this.style.backgroundColor = 'white';" onblur="validate(this);" />

function validate(element){	if(element.value == "")	{		element.style.backgroundColor = "yellow";	}}

2) and 3) I'm not really sure where you're going with this. Should the error message show up before the user even begins entering data into the form? Should it only show up if the user clicks the submit button? Or when focus is given to the field? If it is when focus is given to the field, you could do something like this:

<span id="UserNameError" style="display: none;">This field is required.</span><input type="test" class="required" id="UserName" onfocus="enteredField(this);" onblur="validate(this);" />

function enteredField(element){	if(element.className == "required")	{		element.style.backgroundColor = "white";		var span = document.getElementById(element.id + "Error");		if(span)		{			 span.style.display = "inline";		}	}}function validate(element){	if(element.value == "")	{		element.style.backgroundColor = "yellow";		var span = document.getElementById(element.id + "Error");		if(span)		{			 span.style.display = "none";		}	}}

[dooballoh]

Thnk you very much again jesh.I've tested the codes you've posted for #2) and #3) and it gives me an error saying that;

'value' is null not an object

and it occurs at here;

function validate(element){	if(element.value == "")

However, I've tried this for myself(searched google for another 2 days ) javascript;

function checkForm() {name = document.getElementById("name").value;email = document.getElementById("email").value;comment = document.getElementById("comment").value;if (name == "") {hideAllErrors();document.getElementById("nameError").style.display = "inline";document.getElementById("name").select();document.getElementById("name").focus();document.getElementById("name").style.background ="lightyellow";return false;} else {document.getElementById("name").style.background ="";}REPEATMORE FIELDSreturn true;}function hideAllErrors() {document.getElementById("nameError").style.display = "none"document.getElementById("emailError").style.display = "none"document.getElementById("commentError").style.display = "none"}

And HTML;

<form onSubmit="return checkForm();" method=post action="myscript.php"><span class=label>Name:</span><input type=text value="" id=name><div class=error id=nameError>Required: Please enter your name<br></div><br></form>

It works for changing background color, but these problems have to be fixed.1. It's highlight ONLY one field in yellow (at the first field missed). How can I do to highlight ALL required fields that users left blank?2. Let say if user left 3 fields blank, required note and yellow field shows(focusing) at first field.When I click on second or third required field left blank, this required note still stays on first field.How can I do this error note(required note) moves to any of clicked fields?3. I'd like to add 'close fuction' inside of this error note.How can I do this?Thank you very much again.