Jump to content

Ajax Form Validation


hybrid kill3r
 Share

Recommended Posts

I have a form that uses ajax to validate the info provided. I can't figure out why, but the form still submits, even when left blank.My Ajax.php file:

<?php$do = $_GET['do'];switch($do){		case "thread_info":		$thread = array(					'title' => $_GET['title'],					'description' => $_GET['description'],					'body' => $_GET['body']					);						header('Content-Type: text/xml');		header('Pragma: no-cache');		echo '<?xml version="1.0" encoding="UTF-8"?>';		echo '<errors>';						if(!$thread['title']){			echo "<li>You must enter a title!</li>";	}	if(strlen($thread['title']) > 25){			echo "<li>The title is too long.</li>";	} 	if(strlen($thread['title']) < 10){			echo "<li>The title is too short.</li>";	}	if(!$thread['description']){			echo "<li>You must enter a description.</li>";	}	if(strlen($thread['description']) > 15){			echo "<li>The description is too long!</li>";	}	if(strlen($thread['description']) < 5){			echo "<li>The description is too short!</li>";	}	if(!$thread['body']){			echo "<li>You must enter a message for your post!</li>";	}	if(htmlspecialchars($thread['body'])){			echo "<li>Your body contains invalid content.  HTML is not allowed in posts.</li>";	}		echo "</errors>";		break;		default: 			echo "Invalid action.";			break;		}?>

java script:

function validateThread(){  var title = getElementByID("title");  var description = getElementByID("description");  var message = getElementByID("body");    if (window.XMLHttpRequest) {		http = new XMLHttpRequest();	} else if (window.ActiveXObject) {		http = new ActiveXObject("Microsoft.XMLHTTP");	}	handle = document.getElementById(userid);	var url = 'classes/ajax.php?';			var fullurl = url + 'do=thread_info&title=' + encodeURIComponent(title.value) + '&description=' + encodeURIComponent(description.value) + '&body=' + encodeURIComponent(message.value);		http.open("GET", fullurl, true);		http.send(null);		http.onreadystatechange = statechange_errors;	ajaxRequest.onreadystatechange = statechange_errors(){	  html = getElementByTagName("errors");	  if(html.value > 0){		  document.getElementById('form_errors').style.display='visible';		document.getElementByID('form_errors').innerHTML = html;		return FALSE;	  } else {		document.thread.submit();	  }}}

Form:

<div id='boards'><ul id='form_errors' style='display: none;'></ul>  <form action='ACTION' method='POST' name='register' onsubmit="validateThread(); return false;">	<table align='center' width='100%' cellspacing='1' cellpadding='3' border='0'>	  <tr>		<td align='center' colspan='2' class='category_top'>Create Thread</td>	  </tr><tr>		<td align='right'>Title: </td>		<td align='left'><input type='text' name='title' size='30' id='title'></td>	  </tr><tr>		<td align='right'>Description: </td>		<td align='left'><input type='text' name='description' size='30' id='description'></td>	  </tr><tr>		<td align='right'>Body: </td>		<td align='left'><textarea name='body' rows='10' cols='40' id='title'></textarea></td>	  </tr><tr>		<td align='center' colspan='2'><input type='submit' name='submit' value='Post'></td>	  </tr><tr>	</table>  </form></div>

It's also supposed to update the form_errors unordered list above the form to display the error messages created in the Ajax file. Please, please, please, please, please help!

Edited by Hybrid Kill3r
Link to comment
Share on other sites

There are many, many Javascript errors on the page. Are you using a Javascript debugger? Every time it hits a runtime error in your validate function, the function just ends and since it didn't return a value it submits the form. That means that if the form submits, you have a Javascript error. You need to comment out all of the code in your function, add a line at the end to have it return false, and test that. You should see that pushing the button doesn't do anything, which is the working scenario. Once you know that works, start uncommenting one line at a time. If you uncomment a line and try it and it submits, that means the line you just uncommented has an error on it.You'll also want to review some of the ajax tutorials, you're not checking the status of the request before you try to process it. If I add a line to the ajax handler to write to the Firebug console (after fixing the other errors), I can see that the handler get called 3 times before it contains the response XML. You only want the function to run once the response comes back. Check the ajax tutorials for more details.

Link to comment
Share on other sites

I prefer to use Firebug for Firefox, it has a lot of nice features other than just for Javascript. IE8 comes with its own set of developer tools that are pretty decent, as does Opera 10. I don't really use Chrome for much development, it hasn't matured enough yet to have a decent set of tools available.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...