Ajax Form Validation Problem

Question

I've got my form validation almost working but I can't seem to figure this last problem out.

I'm trying to send back error messages and position them in their own div next to their relevant form fields.

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 most of my ajax

function regForm(thisform) { //Reg user form check
    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; //send the data through the url - frist is the name i want to call it... second grad the content from the form using its id
    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;
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.

Any insight would be a big help! Thanks.

Answer 1

I don't entirely understand what you mean by "coming back in its own div" but you are aware that an element ID must be unique in the document? There doesn't happen to happen that you get two DIVs of the same ID if the error DIV comes back?

Answer 2

Try having only a single echo statement at the very end of the script (so have a variable to concatenate all your error messages and only echo it at the very end).

Also, I would very strongly recommend using a JS library (like jQuery) for all your ajax needs - will make your life a whole lot easier

Answer 3

ok I've got it figured out and like always it was stupid why it wasn't working.

in my adduser.php page I just need to wrap the error message in a xml tag.

echo "<errors>";

//error content

echo "</errors>";