Best Way To Output Errors?

[hybrid kill3r]

I've pretty much gotten my javascript form working. The only thing is that I can only get the function to display one error. I was wondering if maybe I can only use innerHTML once, or what's going on. Here's my code:

function validThread() {var thread = document.getElementById('thread');var title = document.getElementById('title');var description = document.getElementById('description');var message = document.getElementById('message');var form_errors = document.getElementById('form_errors');if(title.value.length < 5){	var html = '<li>Your title must be greater than five characters in length.</li>';	title.focus();	form_errors.innerHTML = html;	return false;}else if(title.value.length > 25){	var html2 = '<li>The title is too long.  It must be less than 20 characters in length.</li>';	title.focus();	return false;}else if(description.value.length < 5){	html3 = "<li>You must enter a description.</li>";	description.focus();	form_errors.innerHTML = html3;	return false;}else if(description.value.length > 25){	html4 = "<li>The description is too long.</li>";	description.focus();	form_errors.innerHTML = html4;	return false;}else if(message.value.length == 0){	html5  = "<li>You must enter a message!</li>";	message.focus();	form_errors.innerHTML = html5;	return false;}else if(message.value.length < 10){	html6 = "<li>The message is too short.</li>";	message.focus();	form_errors.innerHTML = html6;	return false;}else{	return true;}}

Edited July 1, 2009 by Hybrid Kill3r

[roundcorners]

how/where are you outputting the value of form_errors?If you were to use an alert() function, you would only see one at a time.you could add and assign the different string values to form_errors and then output the string at the end

[hybrid kill3r]

form errors is the id of an unordered list. I don't want to use alert because of that very reason. It would be much more efficient for the guest to see all errors at once.

[Ingolme]

Rather than useing if() {} elseif {}, just use a series of if() statements in a row, this way they can accumulate if necessary. In the following example, since you can't focus on more than one field, I've given the wrong fields a red border, but you can do what you like with them.

function validThread() {  var thread = document.getElementById('thread');  var title = document.getElementById('title');  var description = document.getElementById('description');  var message = document.getElementById('message');  var form_errors = document.getElementById('form_errors');  var ret = true;  var errMessage = "";  if(title.value.length < 5) {    ret = false;    errMessage += '<li>Your title must be greater than five characters in length.</li>';    title.style.border = "1px solid red";  }  if(title.value.length > 25) {    ret = false;    errMesaage += '<li>The title is too long.  It must be less than 20 characters in length.</li>';    title.style.border = "1px solid red";  }  if(description.value.length < 5) {    ret = false;    errMessage += '<li>You must enter a description.</li>';    description.style.border = "1px solid red";  }  if(description.value.length > 25) {    ret = false;    errMessage += '<li>The description is too long.</li>';    description.style.border = "1px solid red";  }  if(message.value.length == 0) {    ret = false;    errMessage += '<li>You must enter a message!</li>';    message.style.border = "1px solid red";  }  if(message.value.length < 10) {    ret = false;    errMessage += '<li>The message is too short.</li>';    message.style.border = "1px solid red";  }  form_errors.innerHTML = errMessage;  return ret;}

[hybrid kill3r]

Great! Thanks for all your help, Ingolme! Worked perfectly.

[hybrid kill3r]

One more thing, how would you suggest I change the visibility of the form_errors div? And also, the form won't submit when I enter the information correctly.

[Ingolme]

You can modify the display property with java script:

form_errors.style.display = "none";

Try alerting the value of ret to see what it is right before the function returns it.

[hybrid kill3r]

i submit it blank, and it says false. then i submit it correctly, and it says true. Are you sure true and false will work the same way when it's in string form?

[justsomeguy]

They aren't strings, they're booleans. Show your form tag, do you have an explicit "return false" there?

Edited July 1, 2009 by justsomeguy

[hybrid kill3r]

<div id='boards'>  <form action='ACTION' method='POST' id='thread' onSubmit="return validThread();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 id='form_errors' style='background: #ff6347;border: 2px solid #B22222;color: #000;padding: 25px;margin: 10px 0px 0px 0px;' colspan='2'></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='message' rows='10' cols='40' id='message'></textarea></td>	  </tr><tr>		<td align='center' colspan='2'><input type='submit' value='Submit'></td>	  </tr><tr>	</table>  </form></div>

I do. And i changed the ul to a td

[Ingolme]

The problem is this:

onSubmit="return validThread();return false;"

The form will never submit because of the return false; at the end.

[hybrid kill3r]

I actually just added that to see if it would make a difference. But, it didn't.

[Ingolme]

There's no reason why it shouldn't be working. I'd have to test it myself to see what's wrong.Your form element's action attribute has a value that is likely to give you a 404 error:<form action="ACTION"

[hybrid kill3r]

I have a PHP script that passes variables to the template and defines ACTION with an array. Maybe that's why it's not submitting. here it is:

<?phpsession_start();require_once('config.php');include('classes/template.php');include('classes/home.php');include('classes/member.php');include('classes/post.php');if($_SESSION['userID']){	$userID = $_SESSION['userID'];} else {	$userID = "";}$template = new template;$member = new member;$home = new home;	if(!$user['id']){		$variables = array(						   'STYLESHEET' => "templates/default/style.css",						   'QUICK_PANEL' => $member->quickPanel($userID),						   'MENU_LINKS' => $home->menuLinks($userID),						   'JAVASCRIPT' => "<script type='text/javascript' src='javascript/formborders.js'></script><script type='text/javascript' src='javascript/main.js'></script><script type='text/javascript' src='javascript/validthread2.js'></script>",						   );	}		$file = "templates/default/global_header.tpl";	echo $template->passvars($variables, $file);$act = $_GET['act'];switch($act){  case "create":    if(!$_GET['forum']){  	echo "Invalid action.";  } else {		$post = new post;		if($_POST['submit']){	$thread = array(					'author' => $user['id'],					'title' => $_POST['title'],					'description' => $_POST['description'],					'body' => $_POST['body']					);	  if(!$post->createThread($thread, $_GET['forum'], $user['id'])){		  echo "There was a problem creating your thread.";	} else {		echo "<meta http-equiv='refresh' content='5;url=thread.php?id=".mysql_insert_id()."'>";	}  } else {	$variables = array(						'ACTION' => $_SERVER['PHP_SELF']."?act=create&forum=".$_GET['forum']						);	  $file = "templates/default/create_thread.tpl";	  echo $template->passvars($variables, $file);	  	} }}include('templates/default/global_footer.tpl');?>

Edited July 2, 2009 by Hybrid Kill3r

[Ingolme]

To know if it's working, just check the source code of the page that is returned from the server.