www.webdeveloper.com
Results 1 to 8 of 8

Thread: Form Validation help

Hybrid View

  1. #1
    Join Date
    Jun 2009
    Posts
    11

    Form Validation help

    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 -
    Code:
    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.
    Code:
    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;
    }
    Attached Files Attached Files

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What is the format of responseText?
    Where are the error messages displayed exactly?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Jun 2009
    Posts
    11
    Quote Originally Posted by Fang View Post
    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.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Split the errors in responseText. This would then write the error for lname or an asterisk (as in the present form)
    Code:
    document.getElementById('lname').parentNode.lastChild.data = (errortextForLname)? errorTextForLname : '*'
    Similar code is required for each validated form control.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Jun 2009
    Posts
    11
    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

    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
    Code:
    <?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.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Surely you should return 1 string?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Jun 2009
    Posts
    11
    Quote Originally Posted by Fang View Post
    Surely you should return 1 string?
    you mean something a little more like this?

    Code:
    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.

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Split the responseText using JavaScript.
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles