form with validation error messaging

I have a long form and I have setup some validation but I'd like some help tidyuing it up and enhancing my requirements. The following displays an error message but its messy. I'd like to know how

a) Highlight the whole row

b) Put an asterix at the end of the appropriate item.

c) Any other techniques you think good.

Also can you explain to me why, when its validated the Address fields go out of alignment with the other text fields.

If possible could you tell me how to (in realtime using ajax) check (for example) if the NHS No exists in one of my databases. If not display an error message and not allow the form to be submitted.

I have trawled the internet for the answer but I cant find the right answer.

One last thing: If I have a datepicker field, Ive noticed that you cant edit the field directly! Any opinions?

Thanks

Darryl

---------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Cheshire and Merseyside Rehabilitation Network Referral Proforma</title>

<LINK rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script>
$(function() {

   $( "#dateOfCondition" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: '-15:+0'
   });
   $( "#dateOfCondition" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
   $( "#dateOfLastScreen" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: '-20:+0'
   });
   $( "#dateOfLastScreen" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
   $( "#dob" ).datepicker({
      changeMonth: true,
      changeYear: true,
      yearRange: '-100:+0'
   });
   $( "#dob" ).datepicker( "option", "dateFormat", "dd/mm/yy" );

   $("#Proforma").validate({
    rules: {
     completedBy: "required",
     completedByEmail: {
       required: true,
       email:true
     },
     nhsNumber: "required",
     dob: {
       required: true,
       date: true
     }
    },
    messages: {
     nhsNumber: "*",
     surname: "*",
     firstname: "*",
     completedBy: "Please enter your firstname",
     completedByEmail: "* valid email",
     dob: "* valid date"
    }
   });
});
</script>
<style type="text/css">
#Proforma .error {
margin-left: 10px;
width: auto;
display: inline;
color:red;
}

</style>
</head>
<body>

<form method="post" action="/development/cmrehab/referralform.asp" id="Proforma" name="Proforma">
<table width="90%">
<tr><td colspan=2 align=right>
  <img src="images/nhs.jpg" border=0 style="margin-top:0px;padding-bottom:10px;">
  <br>Cheshire and Mersyside<br>Rehabilitation Network</td>
</tr>
<tr><td colspan=2 align=center>
   <div style="width:440px;">
    <h1>Cheshire and Merseyside Rehabilitation Network Referral Proforma</h1>
   </div>
  </td>
</tr>

<tr><td colspan=3 class="highlight">Please indicate Level of rehabilitation need and service required</td></tr>
<tr>
  <td colspan=2 align=left>
   <table width="100%" style="border:1px solid black;padding-left:10px;padding-bottom:20px;" border=0>

    <tr><td colspan=3> </td></tr>

    <tr rowheight=40 valign=bottom class="normal">
     <td class="normal"><input type="radio" name="rehabLevel" value="A" class="required">  Hub - Category A</td>
     <td class="normal"><input type="radio" name="rehabLevel" value="B" class="required">  Spoke - Category B</td>
     <td class="normal"><input type="radio" name="rehabLevel" value="I" class="required">  Spoke - Individual Case Consideration</td>
    </tr>
    <tr class="normal" align=left>
     <td colspan=3>
      <table width="100%" border=0>
       <tr>
        <td class="normal" width="40%">Name of person Completing form:</td>
        <td colspan=2><input type="text" name="completedBy" id="completedBy" size="30" ></td>
       </tr>
       <tr>
        <td class="normal">Email of person Completing form:</td>
        <td colspan=2><input type="text" name="completedByEmail" id="completedByEmail" size="30" ></td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Patient Demographics and Referral Details</td></tr>
<tr valign=top align=left>
  <td>
   <table width="100%" style="border:1px solid black;padding-left:10px; height:266px" border=0>
    <tr>
     <td class="heading">NHS No:</td><td><input type="text" name="nhsNumber" size=20 maxlength=10 class="required"></td>
    </tr>
    <tr><td colspan=2><hr width="100%"></td></tr>
    <tr>
     <td class="heading" colspan=2>Patient Details:</td>
    </tr>
    <tr><td class="normal">Surname:</td><td><input type="text" size="20" name="surname" id="surname" class="required"></td></tr>
    <tr><td class="normal">First Name:</td><td><input type="text" size="20" name="firstname" id="firstname" class="required"></td></tr>
    <tr><td class="normal">Date of Birth:</td><td><input type="text" size="20" name="dob" id="dob" class="required"></td></tr>
    <tr><td class="normal">Address:</td><td><input type="text" size="20" name="address1" id="address1" class="required"></td></tr>
    <tr><td class="normal"></td><td><input type="text" size="20" name="address2" id="address2"></td></tr>
    <tr><td class="normal"></td><td><input type="text" size="20" name="address3" id="address3"></td></tr>
    <tr><td class="normal"></td><td><input type="text" size="20" name="address4" id="address4" class="required"></td></tr>

   </table>
  </td>
  <td align=left>
   <table width="100%" style="border:1px solid black;padding-left:20px;height:268px;" border=0>
    <tr>
     <td class="heading">GP:</td>
     <td><input type="text" name="gp" size=20 class="required"></td>
    </tr>
    <tr>
     <td colspan=2 class="heading">Next of Kin:</td>
    </tr>
    <tr>
     <td class="heading">Name:</td>
     <td><input type="text" name="nextOfKin" size=20 class="required"></td>
    </tr>
    <tr>
     <td class="heading">Address:</td>
     <td><input type="text" name="nextofkin_address1" size=20 class="required"></td>
    </tr>
    <tr>
     <td> </td>
     <td><input type="text" name="nextofkin_address2" size=20></td>
    </tr>
    <tr>
     <td> </td>
     <td><input type="text" name="nextofkin_address3" size=20></td>
    </tr>
    <tr>
     <td> </td>
     <td><input type="text" name="nextofkin_address4" size=20 class="required"></td>
    </tr>
    <tr>
     <td class="heading">Tel No:</td>
     <td><input type="text" name="nextofkin_telNo" size=20 class="required"></td>
    </tr>

   </table>
  </td>
</tr>
<tr valign=top align=left>
  <td align=left>
   <table width="100%" style="border:1px solid black;padding-left:10px; height:90px;" border=0>
    <tr><td class="heading" width="36%">Current Placement:</td><td><input type="text" name="currentPlacement" size=20></td></tr>
    <tr><td class="heading">Contact No:</td><td><input type="text" size="20" name="contactNo" id="contactNo"></td></tr>
   </table>
  </td>
  <td align=left>
   <table width="100%" style="border:1px solid black;padding-left:20px; height:63px;padding-top:10px; height:90px;" border=0>
    <tr valign="middle">
     <td class="heading" width="29%">Consultant:</td>
     <td><input type="text" name="consultant" size=20 class="required"></td>
    </tr>
   </table>
  </td>
</tr>
<tr valign=top align=left>
  <td align=left>
   <table width="100%" style="border:1px solid black;padding-left:10px; height:90px;" border=0>
    <tr><td class="heading" width="36%">Diagnosis:</td><td><input type="text" name="diagnosis" size=20 class="required"></td></tr>
    <tr><td class="heading">Description of condition</td><td><input type="text" size="20" name="condition" id="condition" class="required"></td></tr>
   </table>
  </td>
  <td align=left>
   <table width="100%" style="border:1px solid black;padding-left:20px; height:63px;padding-top:10px; height:90px;" border=0>
    <tr valign="middle">
     <td class="heading" width="29%">Date of condition /<br>injury       /<br>illness</td>
     <td><input type="text" name="dateOfCondition" id="dateOfCondition" class="required"/></td>
    </tr>
   </table>
  </td>
</tr>

<tr valign=top align=left>
  <td align=left colspan=2>
   <table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
   <tr valign=top align=left><td colspan=2 class="heading" align=center><h1>Summary of Surgical/Medical interventions completed to date</h1></td></tr>
    <tr><td class="heading" width="50%">Glasgow Coma Scale score <br>(on admission and current)</td><td width="45%" class="heading"><textarea name="glasgowComa" id="glasgowComa" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Current Medication</td><td width="45%" class="heading"><textarea name="currentMed" id="currentMed" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Latest Blood Results</td><td width="45%" class="heading"><textarea name="bloodResults" id="bloodResults" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Infection Control Considerations (inc MRSA;CDT)</td><td width="45%" class="heading"><textarea name="infectionControl" id="infectionControl" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Date of last screen</td><td width="45%" class="heading"><input type="text" size=10 name="dateOfLastScreen" id="dateOfLastScreen"></td></tr>

   </table>
  </td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Pre-condition/injury/illness information</td></tr>
<tr valign=top align=left>
  <td align=left colspan=2>
   <table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
    <tr><td class="heading" width="50%">Significant medical history</td><td width="45%" class="heading"><textarea name="medicalHistory" id="medicalHistory" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Significant pre-morbid psychological/psychiatric history</td><td width="45%" class="heading"><textarea name="preMorbid" id="preMorbid" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Social history (inc family/carer; Advocate; MCA; POA; SW)</td><td width="45%" class="heading"><textarea name="socialhistory" id="socialhistory" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Housing</td><td width="45%" class="heading"><textarea name="housing" id="housing" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Work</td><td width="45%" class="heading"><textarea name="work" id="work" cols=30 rows=5></textarea></td></tr>
    <tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=center><u>Summary of functional Status</u></td></tr>
    <tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=left><u>Sensory</u></td></tr>
    <tr><td class="heading" width="50%">Vision</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_vision" id="sensory_vision"></td></tr>
    <tr><td class="heading" width="50%">Hearing</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_hearing" id="sensory_hearing"></td></tr>
    <tr><td class="heading" width="50%">Perceptual</td><td width="45%" class="heading"><input type="text" size=40 name="sensory_perceptual" id="sensory_perceptual"></td></tr>
    <tr style="height:50px; vertical-align:middle;"><td class="heading" align=left>Airway Management (inc tracheostromy/oxygen)</td><td width="45%" class="heading"><input type="text" size=40 name="airway_management" id="airway_management"></td></tr>
    <tr style="height:50px; vertical-align:middle;"><td class="heading" width="100%" colspan=2 align=left><u>Pressure Management</u></td></tr>
    <tr><td class="normal" width="50%">Pressure sore</td><td width="45%" class="normal">
     Yes  <input type="radio" size=40 name="pm_sore" value="True">  No  <input type="radio" size=40 name="pm_sore" value="false">
     </td>
    </tr>
    <tr>
     <td class="normal" width="50%"><span style="margin-left:20px;">Grade</span></td>
     <td width="45%" class="heading"><input type="text" name="pm_grade" id="pm_grade" size=2></td>
    </tr>
    <tr>
     <td class="normal" width="50%"><span style="margin-left:20px;">Location</span></td>
     <td width="45%" class="heading"><input type="text" name="pm_location" id="pm_location" size=20></td>
    </tr>
    <tr><td class="normal" width="50%"><span style="margin-left:20px;">Waterlow score</span></td><td width="45%" class="heading">
     <input type="text" name="pm_waterlow" id="pm_waterlow" size=2>
     </td>
    </tr>
    <tr><td class="heading" width="50%">Mobility (inc falls risk)</td><td width="45%" class="heading"><textarea name="mobility" id="mobility" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Continence</td><td width="45%" class="heading"><textarea name="continence" id="continence" cols=30 rows=5></textarea></td></tr>
    <tr style="height:50px; vertical-align:bottom;"><td class="heading" width="100%" colspan=2 align=left><u>Nutrition</u></td></tr>
    <tr valign=top><td class="normal" width="50%">Weight</td><td width="45%" class="heading"><textarea name="nut_weight" id="nut_weight" cols=30 rows=5></textarea></td></tr>
    <tr valign=top><td class="normal" width="50%">MUST</td><td width="45%" class="heading"><textarea name="nut_must" id="nut_must" cols=30 rows=5></textarea></td></tr>
    <tr style="height:50px; vertical-align:top;">
     <td class="heading" width="50%" align=left><u>Cognitive (inc PTA; STML; Level of Consciousness)</u></td>
     <td width="45%" class="heading"><textarea name="lvlConscious" id="lvlConscious" cols=30 rows=5></textarea></td>
    </tr>
   </table>
  </td>
</tr>
<tr><td colspan=2> </td></tr>
<tr><td colspan=2 class="highlight">Summary of Rehabilitation Needs</td></tr>
<tr valign=top align=left>
  <td align=left colspan=2>
   <table width="100%" style="border:1px solid black;padding-left:10px;" border=0>
    <tr><td class="heading" width="50%">Rehabilitation Goals</td><td width="45%" class="heading"><textarea name="rehabGoals" id="rehabGoals" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Rehabilitation progress, management and any complications</td><td width="45%" class="heading"><textarea name="rehabProgress" id="rehabProgress" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Current Rehabilitation key management plan and profession specific input</td><td width="45%" class="heading"><textarea name="rehabCurrent" id="rehabCurrent" cols=30 rows=5></textarea></td></tr>
    <tr><td class="heading" width="50%">Other Key information</td><td width="45%" class="heading"><textarea name="otherKeyInfo" id="otherKeyInfo" cols=30 rows=5 onfocus="this.value='';">Further treatment plans/follow up Safeguarding: MCA issues; DOLS; challenging behavious; 1:1 needs
    </textarea></td></tr>
   </table>
  </td>
</tr>
<tr><td colspan=2><input type="Submit" value="Send"></td></tr>

</table>
<input type="hidden" name="reload" value=1>
</form>

</body>
</html>

Topic Participants
darrylw99
peter.aganyo

form with validation error messaging

form with validation error messaging

Topic Participants

darrylw99

peter.aganyo