Form Validation help

[cultivate]

Hi I'm trying to create a simple registration form with ajax validation. I've got the form working almost how I'd like... a message appears on the page with the errors for each field entered incorrectly.

The problem is all the error messages appear in one div together and I would like to have each field have its own div containing only its own error.

I think I need to wrap my error messages in xml and use something like this -

document.getElementById("feedback1").innerHTML= xmlDoc.getElementsByTagName("lname")[0].childNodes[0].nodeValue;

- but can't seem to get it working

Does anyone know how I should modify my code to do this?

Attached are the 3 I'm currently using

And Here is my code for my ajax page only.

var xmlHttp;

function regForm(thisform) {
	xmlHttp=GetXmlHttpObject();
	if (xmlHttp==null) {
 alert ("Browser does not support HTTP Request");
 return;
 }
 var formdata = "";
 formdata = "lname=" + thisform.elements['lname'].value + "&fname=" + thisform.elements['fname'].value + "&email=" + thisform.elements['email'].value + "&username=" + thisform.elements['username'].value + "&pass=" + thisform.elements['pass'].value + "&pass2=" + thisform.elements['pass2'].value;
	xmlHttp.onreadystatechange=formSubmitted;
	xmlHttp.open("POST", "adduser.php",true);
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.setRequestHeader("Content-length", formdata.length);
	xmlHttp.setRequestHeader("Connection", "close");
	xmlHttp.send(formdata);
	return false;
}

function formSubmitted() {
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { 
	xmlDoc=xmlHttp.responseXML;
document.getElementById("feedback").innerHTML = xmlHttp.responseText;
//document.getElementById("feedback1").innerHTML= xmlDoc.getElementsByTagName("lname")[0].childNodes[0].nodeValue;
	}
}

function GetXmlHttpObject() {
xmlHttp=null;
try
 {
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

[Fang]

What is the format of responseText?
Where are the error messages displayed exactly?

[cultivate]

What is the format of responseText?
Where are the error messages displayed exactly?

The response Text is just being echoed out in a php page. And I have the validation error messages displaying all in one div on the form page so when the user hit the submit button they stay on the page, their form data is not lost and the error messages appear... I would just like to have each error message appear in its own div positioned next to its relevant form field.

any thought.

[Fang]

Split the errors in responseText. This would then write the error for lname or an asterisk (as in the present form)

document.getElementById('lname').parentNode.lastChild.data = (errortextForLname)? errorTextForLname : '*'

Similar code is required for each validated form control.

[cultivate]

Thanks for the insight fang, but I've almost got it working how I'd like...

I've got an error message coming back in its own div, but when I try to send multiple messages back nothing happens, any thoughts?

Here's a bit of my js code

document.getElementById("feedback1").innerHTML= xmlDoc.getElementsByTagName("lname")[0].childNodes[0].nodeValue;
document.getElementById("feedback2").innerHTML= xmlDoc.getElementsByTagName("fname")[0].childNodes[0].nodeValue;

and here is my simple adduser.php page so far

<?php
header('Content-Type: text/xml');

$lname = mysql_real_escape_string($_POST['lname']);
//$fname = mysql_real_escape_string($_POST['fname']);

if($lname == NULL) {
echo "<lname>NEED TO FILL</lname>";
}

//if($fname == NULL) {
//echo "<fname>NEED TO FILL</fname>";
//}
else {
	echo "<lname> </lname>";
	//echo "<fname> </fname>";
}
?>

As you can see I've got the fname information commented out right now and my messaging is working for lname but as soon as I uncomment the fname stuff in hopes to send a message for both lname and fname nothing happens I don't understand why.

[Fang]

Surely you should return 1 string?

[cultivate]

Surely you should return 1 string?

you mean something a little more like this?

header('Content-Type: text/xml');
$errors = array();

$lname = mysql_real_escape_string($_POST['lname']);
//$fname = mysql_real_escape_string($_POST['fname']);

if($lname == NULL) {
$errors[] = "<lname>NEED TO FILL</lname>";
}

$errmsg = "";

$errcount = count($errors);
if($errcount > 0) {
	echo "The following errors occurred when your form was submitted:<br /><br />";
	for($i=0; $i< $errcount; $i++) {
		$errmsg .= $errors[$i]."<br />";
	}
	echo $errmsg; 
}

else {
	echo " ";

}

This is what I had to start with but I can't seem to get it working I'd really like to have the individual error messages returned as XML and displayed in separate divs.

[Fang]

Split the responseText using JavaScript.