Showing errors all at once

[AngelicOne]

I'm using javascript for my client validation and I would like this to work the way I wanted to. I have three textboxes for last name, middle name and firstname. All the fields are mandatory and if the form is submitted there would be an error to display below the textbox. The problem now is I couldn't show three errors at once. I could only show one error at a time. The error msgs are specific that is "Last name required", "First name required

Here's my JS structure

function validate()
{

if (textbox1 == empty)
{
//show error below textbox by using getElementById to the empty div below it
}

if (textbox2 == empty)
{
//show error
}

if (textbox3 == empty)
{
//show error
}

As you can see I'm using an if statement which only runs a block of code once regardless if the others is true. Now, how to show multiple errors at once?

[Airshow]

AngelicOne,

Choices choices ....

One way to do this is to stack your error messages up in an array, then dump the joined array to eg. an "error" div. Here is is in pseudocode:

function validate()
{
  var errorMsg = [];

  if (test_1)
  {
    errorMsg.push(errorMessage_1);
  }
  if (test_2)
  {
    errorMsg.push(errorMessage_2);
  }
  if (test_3)
  {
    errorMsg.push(errorMessage_3);
  }
  document.getElementById("myErrorBox").innerHTML = errorMsg.join("<br/>");
}

Another way is to have one error box, eg. a div or span, per form input field. Here it is in pseudocode again:

function validate()
{
  document.getElementById("myErrorBox_1").innerHTML = (test_1) ? errorMessage_1 : '';
  document.getElementById("myErrorBox_2").innerHTML = (test_2) ? errorMessage_2 : '';
  document.getElementById("myErrorBox_3").innerHTML = (test_3) ? errorMessage_3 : '';
}

Yet another way is to hard code the error messages in HTML, initially hide them with CSS, then in the validation function show/hide according to what validates and what doesn't:

function validate()
{
  document.getElementById("myErrorBox_1").style.display = (test_1) ? 'block' : 'none';
  document.getElementById("myErrorBox_2").style.display = (test_2) ? 'block' : 'none';
  document.getElementById("myErrorBox_3").style.display = (test_3) ? 'block' : 'none';
}

Note, in this last approach, use 'block' for divs or 'inline' for spans.

Airshow

[AngelicOne]

AngelicOne,

Choices choices ....

One way to do this is to stack your error messages up in an array, then dump the joined array to eg. an "error" div. Here is is in pseudocode:

function validate()
{
  var errorMsg = [];

  if (test_1)
  {
    errorMsg.push(errorMessage_1);
  }
  if (test_2)
  {
    errorMsg.push(errorMessage_2);
  }
  if (test_3)
  {
    errorMsg.push(errorMessage_3);
  }
  document.getElementById("myErrorBox").innerHTML = errorMsg.join("<br/>");
}

Another way is to have one error box, eg. a div or span, per form input field. Here it is in pseudocode again:

function validate()
{
  document.getElementById("myErrorBox_1").innerHTML = (test_1) ? errorMessage_1 : '';
  document.getElementById("myErrorBox_2").innerHTML = (test_2) ? errorMessage_2 : '';
  document.getElementById("myErrorBox_3").innerHTML = (test_3) ? errorMessage_3 : '';
}

Yet another way is to hard code the error messages in HTML, initially hide them with CSS, then in the validation function show/hide according to what validates and what doesn't:

function validate()
{
  document.getElementById("myErrorBox_1").style.display = (test_1) ? 'block' : 'none';
  document.getElementById("myErrorBox_2").style.display = (test_2) ? 'block' : 'none';
  document.getElementById("myErrorBox_3").style.display = (test_3) ? 'block' : 'none';
}

Note, in this last approach, use 'block' for divs or 'inline' for spans.

Airshow

Hello! Thank you for these! My validation works the way I wanted to. There's a little problem though.

Here is what I'm doing for my form validation.

var errors = new Array();

if (!checkField(lname))
{
errors[0] = "Please enter last name";
lname.focus();
}

if(errors != "")
{
document.getElementById("lnameMsg").innerHTML = errors[0];
return false;
}

return true;

Here's my checkfield function that supposed to be for onkeyup event too

function checkField(element, id, alertmsg)
{
if (element.value.length == 0)
{
document.getElementById(id).innerHTML = alertmsg;
element.style.backgroundColor = "MistyRose";
return false;
}
else
{
document.getElementById(id).innerHTML = "";
element.style.backgroundColor = "";
return true;
}
}

As you can see, it needs 3 parameters so I can display a message for onkeyup event handler for my textboxes. Do you think i'm better off making a separate function for checkfield form validation and checkfield onkeyup validation?

[Airshow]

The two types of validation are different enough to warrant separate functions.

However, you may be able to organise the code such that :

• both validation functions make calls to a set of common "utility" functions
• each validation function is responsible for its own reporting of validation outcome.

That would be the smart way to do it, but really only necessary if the individual field validations are complex (eg. email validation).

Airshow

[AngelicOne]

Hello. Thanks for the answers. Please take a look at this http://angelickp.byethost24.com/AliceEnrollment.php.

That is the site i'm currently working on. Here's my validation structure..

function validateForm()
{
var lname = document.forms["enrollment_form"]["lname"];
var errors = new Array();

if (!validInput(lname))
{
errors[0] = "Please enter last name";
lname.focus();
}

if(errors != "")
{
document.getElementById("lnameMsg").innerHTML = errors[0];
return false;
}

return true;
}

function validInput(element)
{
if (element.value.length == 0)
{
element.style.backgroundColor = "MistyRose";
return false;
}
else
{
element.style.backgroundColor = "";
return true;
}
}

The code seems to work fine but I can't clear the messages if it is valid. I tried

if (!validInput(lname))
{
errors[0] = "Please enter last name";
lname.focus();
}
else
{
errors[0] = "";
}

But it still returns false as if the "" for an array is not empty.

[Airshow]

A1,

Your code is difficult to read in the absence of indentations.

Which of my validation patterns is it supposed to be?

Airshow

[AngelicOne]

A1,

Your code is difficult to read in the absence of indentations.

Which of my validation patterns is it supposed to be?

Airshow

The first one. You could look at the site. It's hosted, http://angelickp.byethost24.com/AliceEnrollment.php

[Airshow]

A1,

You have coded a hybrid of pattern 1 and pattern 2.

It has to be wholly one or the other.

Airshow

[AngelicOne]

A1,

You have coded a hybrid of pattern 1 and pattern 2.

It has to be wholly one or the other.

Airshow

Is it not appropriate? I put the error message at an array then the messages will display at specific error box that is in a div tag.