Form Validation - Web Team Procedures and Notes

This page is intended for use only by the Web Team.

Assorted notes for validating HTML forms using Javascript. Shortcuts and other methods are available but these are certainly readable for nearly anyone who may need to maintain the form.

Setup the <form> tag attributes

<form action="http://www2.ohlone.edu/tectitefm/fm.php" method="post" name="adresponseform" onsubmit="return validateform(document.forms.adresponseform)">

PUT FORM CODE HERE

</form>

Add "required" hidden form field

<input type="hidden" name="required" value="firstname,lastname,streetaddress,city,state,zip,payment,receivereminder" />

Add "conditions" hidden form field (Tectitle FormMail)

To check for required completion of at least 1 field if there are 2 fields to compare

<input type="hidden" name="conditions"
value=":@
@TEST@person1|person2@Please provide names of group members being registered.@" />

To check for required completion of at least 1 field if there are more than 2 fields to compare

<input type="hidden" name="derive_fields"
value="groupnames = person1 + person2 + person3 + person4" />
<input type="hidden" name="conditions"
value=":@
@TEST@groupnames@Please provide names of group members being registered.@" />

For more, see Tectite FormMail - Creating HTML Forms.

Add basic Javascript section for validateform() function

<script type="text/javascript">
/* <![CDATA[ */
function validateform(what) {

PUT JAVASCRIPT CODE HERE

}
/* ]]> */
</script>

Define and initialize to false variables for each form field to be tested

  firstname_entered=0;
  lastname_entered=0;
  address_entered=0;
  city_entered=0;
  state_entered=0;
  zip_entered=0;
  payment_selected=0;
  receivereminder_yes_selected=0;
  email_entered=0;
  documents_Requested_selected=0;
  comment_entered=0;
  msg="Please complete missing information:\n";

Add code to check for required form fields

To check for a required <input> or <textarea> field

  //Check if first name field completed
  if (what.elements['firstname'].value != '')
     firstname_entered=1;
  else
    msg = msg + "first name\n";

To check whether any radio button in a set is selected

  //determine whether any radio button is selected
  for (var i=0;i<what.payment.length;i++) {
    if (what.payment[i].checked) {
      payment_selected=1;
      break;
    }
  }
  if (payment_selected==0)
    msg = msg + "payment method\n";

To check for a required radio button field

Check for first selected radio button (in this example, there are 2 radio buttons: Yes, No):

  //Check if radio button for Yes is selected
  if (what.receivereminder[0].checked)
    receivereminder_yes_selected=1;

Then, if that radio button is selected, check whether another field has been completed (such as an email address field):

  // If it is selected, make sure email address is provided
  if (receivereminder_yes_selected == 1) {
    if (what.elements['email'].value != '')
      email_entered=1;
    else
      msg=msg + "email address\n";
  }

To check whether any checkbox in a set is selected

  //determine whether any checkboxes are selected
  for (var i=0;i<what.documents_Requested.length;i++) {
    if (what.documents_Requested[i].checked) {
      documents_Requested_selected=1;
      break;
    }
  }

If no checkbox is selected in that set are selected AND a particular <input> or <textarea> field have not been completed, do error:

  //if no checkboxes selected AND no text input, build error message
  if ((documents_Requested_selected == 0) &&
      (what.elements['commentquestion'].value == '')
     )
    msg = msg + "\nSelect at least one information item or enter a question\n";
  else
    comment_entered=1;

Either display error message or submit form

  //if all fields complete exit otherwise display error
  if (firstname_entered == 1 &&
    lastname_entered == 1 &&
    address_entered == 1 &&
    city_entered == 1 &&
    state_entered == 1 &&
    zip_entered == 1 &&
    payment_selected == 1 &&
    ( receivereminder_yes_selected == 0 ||
     (receivereminder_yes_selected == 1 &&
      email_entered == 1)
    ) &&
    (documents_Requested_selected == 1 ||
     comment_entered == 1)
  )
    return true;
  else {
    alert(msg);
    return false;
  }