Complex forms might require that only certain combinations of values/check boxes and so on be valid. The form shown below has an invalid combination of choices, and this can be picked up by a validation function. The form's submission can be cancelled and the user alerted to the problem.

On attempting to submit the form, the user is shown the following message:

The form defines three rows. The first row displays the Standard Model check box. The second row has two columns: the first contains the Deluxe model checkbox, and the second contains two colour check boxes (in a table of their own). The final row offers the submit and clear buttons as usual:

      <FORM NAME=modelform METHOD="post" ACTION="mailto:put.your@email.address.here" onSubmit="return validate()">

      <table border=2>
      <tr>
      <td>
      <INPUT TYPE="checkbox" NAME="standard" value="Standard
      model">Standard Model
      </td>
      </tr>
      <tr>
      <td>
      <INPUT TYPE="checkbox" NAME="deluxe" value="Deluxe model">Deluxe model
      </td>
      <td>

      <table border=0>
      <tr>
      <td>
      <INPUT TYPE="checkbox" NAME="blue">Blue
      </td>
      <tr>
      <td>
      <INPUT TYPE="checkbox" NAME="green">Green
      </td>
      <tr>
      </table>
      <tr>
      <tr>
      <td>
      <INPUT TYPE="submit" VALUE="Submit this form">
      </td>
      <td>
      <INPUT TYPE="reset" VALUE="Clear form and start again">
      </td>
      </tr>
      </table>
      </FORM>
    

The validate() function tests for a number of invalid conditions. The first test is made to see if both the standard and deluxe models have been chosen:

      if( modelform.standard.checked && modelform.deluxe.checked )
      {
      alert( "Please choose either standard or deluxe (not both) - form
      not submitted" );
      fieldsValid = false;
      }
    

The next two tests examine if a colour has been chosen with the standard model (this is not permitted):

      if( modelform.standard.checked && modelform.blue.checked )
      {
      alert( "Sorry - colour choices are only possible with deluxe cars - form not submitted" );
      fieldsValid = false;
      }
      if( modelform.standard.checked && modelform.green.checked )
      {
      alert( "Sorry - colour choices are only possible with deluxe cars - form not submitted" );
      fieldsValid = false;
      }
    

The final test ensures that only a single colour has been selected:

      if( modelform.blue.checked && modelform.green.checked )
      {
      alert( "Please either blue or green (not both) - form not submitted" );
      fieldsValid = false;
      }