Error checking/Validation

I have the following form, and I want to add simple error checking.  Just so that they have to make a selection before they can submit the page.

Any simple suggestions?
------------------------------------------
<form id="guid" name="guid" method="post" action="/programs/bst.php">
              <table width="100%" border="0" cellpadding="2" cellspacing="2">
            <tr>
              <td width="42%">What is your age?: </td>
              <td width="58%"><select name="$question1">
                <option>Please Select</option>
                <option>40-49</option>
                <option>50-59</option>
                <option>60-69</option>
                <option>70-79</option>
                <option>80-89</option>
                <option>90+</option>
              </select>              </td>
            </tr>
            <tr>
              <td>Do you have any hearing loss?</td>
              <td><select name="$question2">
                <option>Please Select</option>
                <option>Yes</option>
                <option>No</option>
                            </select></td>
            </tr>
            <tr>
              <td>Is English your native language?</td>
              <td><select name="$question3">
                <option>Please Select</option>
                <option>Yes</option>
                <option>No</option>
              </select></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td><input type="submit" name="Submit" value="Continue"></td>
            </tr>
          </table>
          </form>
---------------------
a204801Asked:
Who is Participating?
 
smackadooCommented:
For security reasons, its always best to do validation and error checking at server-side with php and not client-side with javascript

This is because
- javascript could be switched off (they are therefore submitting the form without any checks)
- they could cheat the javascript (pretty easy to do for a determined person)
- not all browsers support javascript in the same way (as i recently found out with Firefox)
- if they wanted they could save the page to their server, inject potentially harmful data, then submit it to your pages

PHP checks on submit

// checkboxes check
$a = array('Question 2'=>'question2','Question 3'=>'question3');
foreach ($a as $k => $v) {
   if ($_POST[$v] !='yes' || $_POST[$v] !='no') {
     echo '<span class="failure">An answer for '.$k.' was not selected</span>';
   }
}

Also its best to specify values on all of your <options> (and it makes it easier to check)
eg
              <option value="">Please Select</option>
                <option value="0">0-9</option>
                <option value="1">10-19</option>
                <option value="2">20-29</option>
                <option value="3">30-39</option>
                <option value="4">40-49</option>
                <option value="5">50-59</option>
                <option value="6">60-69</option>
                <option value="7">70-79</option>
                <option value="8">80-89</option>
                <option value="9">90+</option>


// dropdownboxes check
$b = array('Question 1=>'question1');
foreach ($b as $k => $v) {
   if (($_POST[$v] > 0) && ($_POST[$v] < 11)) {
     echo '<span class="failure">An answer for '.$k.' was not selected</span>';
   }
}
Then echo back the form ( writing any passed answers into your form.)
Its also better to store a single digit for age 1-10 than having "90+" stored
if you then need to write their age you get the value from your db and *10 to get the lowest value and ((*10)+9) to get highest of your range.
0
 
RoonaanCommented:
Hi,

try this:

<script type="text/javascript">
function validateForm(f) {
  var  errors = 0;
  if(f.$question1.selectedIndex < 0) {
     errors++;
     f.$question1.className = 'warning';
   } else {
     f.$question1.className = '';
   }

  if(f.$question2.selectedIndex < 0) {
     errors++;
     f.$question2.className = 'warning';
   } else {
     f.$question2.className = '';
   }

  if(f.$question3.selectedIndex < 0) {
     errors++;
     f.$question3.className = 'warning';
   } else {
     f.$question3.className = '';
   }

   return (errors == 0);
}
</script>
<style type="text/css">
select.warning {background:yellow;}
</style>

<form id="guid" name="guid" method="post" action="/programs/bst.php" onsubmit="return validateForm(this);">

-r-
0
 
a204801Author Commented:

with regards to the choices:


                <option>Please Select</option>
                <option>40-49</option>
                <option>50-59</option>
                <option>60-69</option>
                <option>70-79</option>
                <option>80-89</option>
                <option>90+</option>

Do I need to to something to those?
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
RoonaanCommented:
Not espacially. You might need to change the if(f.$question1.selectedIndex < 0) { to if(f.$question2.selectedIndex < 1) { because of the first option being "Please select" for each dropdown.

-r-
0
 
a204801Author Commented:

The highlighting of the fields is great, but I also want to display a message indicating the error.  Can I do both with this code?

-Mac
0
 
RoonaanCommented:
You can change the line
return (errors == 0);
to
if(errors > 0) {
  alert('Make sure to select an option from all dropdowns!');
  return false;
} else {
  return true;
}
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.