jQuery Forum

I have an accordion and a sql database, below is my html

My problem is it does ALWAYS bring out data into the accordion when I click on the Link. Sometimes it can be two clicks.

Any ideas how to fix my problem?

<script>

$("accordion").accordion({

autoHeight:false, heightStyle: "content",cache:false

});

$("h2,"#accordion").click(function(e) {

var contentDiv = (this).next("div");

contentDiv.load($(this).find("a").attr("href");

});

</script>

<div id="accordion">

<h2 id="<%=lnkPid%>">

<a href="load.asp?pid=lnkPid"><%=strPerson%></a>

</h2>

</div>

<div id="<%=lnkPid%>"></div>

Using Classic ASP how do I set a timer which calls a function that saves the form contents to the database but still stays on the form.

I know it uses setInterval but after that I'm not sure.

Thanks

Ive tried using the formWizard but I'm struggling

 

I have 14 quizzes which I'd like on a contents page.

 

When you click on a quiz it will then display the questions (rg 5 questions per page).

 

On each submit  of the page it saves the data to the database.

 

When it gets to the end, you can either Update the existing data or go back to the contents page and complete another Quiz.

 

I can kind of get things working but havent attempted the contents page. All the data is coming out of a database,

Ive got my form to work as I want it to (Next/Previous)

 

But when it reaches the end <div id="confirmation" class="step submit_step"> it still shows the navigation

buttons. how do I stop it from doing this?

 

    <div id="demoNavigation">      
     <input class="navigation_button" id="back" value="Reset" type="reset" />
     <input class="navigation_button" id="next" value="Submit" type="submit" />
    </div>

 

My jquery code is :

   var remoteAjax = {}; // empty options object

   $("#demoForm .step").each(function(){ // for each step in the wizard, add an option to the remoteAjax object... 
    var thisId = $(this).attr("id");
    remoteAjax[$(this).attr("id")] = {
     url : "store.asp", // the url which stores the stuff in db for each step
     dataType : 'json',
     beforeSubmit: function(data){
       var nPercent = Math.round((thisId / noOfSteps)*100);
       var nColumn  = 100 - nPercent;
       
       $("#data").html("<table width=760 class='Progress' cellspacing=3><tr><td style='background-color:#000000; color:#ffffff;height:30px;' align=center width="+nPercent+"%'>" + nPercent + "</td><td width='+nColumn+'%' style='background-color:#FFFFFF;'></td></tr></table>" + nPercent + ' ' + nColumn + ' ' + $.param(data))
       },
     success : function(responseText, statusText, xhr, $form){
        return data; //return true to make the wizard move to the next step, false will cause the wizard to stay on the CV step (change this in store_in_database.html)
        }
     };
   });

Ive implemented the Form Wizard using Ajax. In the example it displays the posted data in a div. How can I display a progress bar there instead?

 

If I know how many Steps there and I know the id of the current step, can I call a simple piece of ASP using a table to create a progress bar OR is there one built in to the FormWizard?

 

Thanks

Darryl

I have the following code, but I can seem to get the values on the page it posts to (store.asp).; simply by doing a request.querystring. What am i doing wrong?

 

   $(function(){  
    $("#demoForm").formwizard({
      formPluginEnabled: true,
      validationEnabled: true,
      focusFirstInput : true,
      formOptions :{
      success: function(data){$("#status").fadeTo(500,1,function(){ $(this).html("You are now registered!").fadeTo(5000, 0); })},
      beforeSubmit: function(data){$("#data").html("data sent to the server: " + $.param(data));},
      dataType: 'json',
      resetForm: true
      }
     }
    );
    
    
   
   var remoteAjax = {}; // empty options object

   $("#demoForm .step").each(function(){ // for each step in the wizard, add an option to the remoteAjax object...
    remoteAjax[$(this).attr("id")] = {
     url : "store.asp", // the url which stores the stuff in db for each step
     dataType : 'json',
     beforeSubmit: function(data){
      alert($.param(data));
       $("#data").html("data sent to the server: " + $.param(data))
       },
     success : function(responseText, statusText, xhr, $form){
      
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
        '\n\nThe output div should have already been updated with the responseText.');

         
         return data; //return true to make the wizard move to the next step, false will cause the wizard to stay on the CV step (change this in store_in_database.html)
        }
     };
   });

   $("#demoForm").formwizard("option", "remoteAjax", remoteAjax); // set the remoteAjax option for the wizard

I have a table with : Time, CAB, New, Follow Up, Reserved, Urgent radio buttons

 

Plus a javascript function + - that Adds / Removes a new row to the table with an incremented Counter (see below)

 

How can I code the page so that if you click on CAB it opens up a popup and the options you select are placed into a hidden field on the page (with the Counter as the id BUT only for the first time you select CAB.

 

I can get it to work IF its the first option (because this is hard coded in the html, but not for subsequent ones.

 

OR is there a good jQuery way of doing this.

 

I realise I may have been vague, so please ask me for furter informationa and i'll endeavour to explain more clearly.

 

Thanks

Darryl

 

 

 

 newTextBoxDiv.html('<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" STYLE="border-collapse: collapse; font-family: Tahoma; font-size: 10pt" BORDERCOLOR="#111111" WIDTH="100%" >'+
         '<TR class="ClinicTemplateRow">'+
   '<TD WIDTH="10%" HEIGHT="40" STYLE="border-style: solid; border-width: 1"><P ALIGN="center">'+
   '<SELECT SIZE="1" NAME="HH'+counter+'">'+
   '<OPTION VALUE="07">07</OPTION><OPTION VALUE="08">08</OPTION><OPTION VALUE="09">09</OPTION><OPTION VALUE="10">10</OPTION><OPTION VALUE="11">11</OPTION>'+
         '<OPTION VALUE="12">12</OPTION>'+
         '<OPTION VALUE="13">13</OPTION>'+
         '<OPTION VALUE="14">14</OPTION>'+
         '<OPTION VALUE="15">15</OPTION>'+
         '<OPTION VALUE="16">16</OPTION>'+
         '<OPTION VALUE="17">17</OPTION>'+
         '<OPTION VALUE="18">18</OPTION>'+
         '<OPTION VALUE="19">19</OPTION>'+
         '<OPTION VALUE="20">20</OPTION>'+
         '<OPTION VALUE="21">21</OPTION>'+
         '<OPTION VALUE="22">22</OPTION>'+
         '</SELECT>'+
         ' <B>:</B><SELECT SIZE="1" NAME="MM'+counter+'">'+
   '<OPTION VALUE="00">00</OPTION>'+
   '<OPTION VALUE="05">05</OPTION>'+
   '<OPTION VALUE="10">10</OPTION>'+
   '<OPTION VALUE="15">15</OPTION>'+
   '<OPTION VALUE="20">20</OPTION>'+
   '<OPTION VALUE="25">25</OPTION>'+
   '<OPTION VALUE="30">30</OPTION>'+
   '<OPTION VALUE="35">35</OPTION>'+
   '<OPTION VALUE="40">40</OPTION>'+
   '<OPTION VALUE="45">45</OPTION>'+
   '<OPTION VALUE="50">50</OPTION>'+
   '<OPTION VALUE="55">55</OPTION>'+
   '</SELECT></TD>'+

   '<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="CaB" class="cab"></TD>'+   
   '<div id="whatever'+counter+'"><TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="New"></TD>'+
   '<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="Follow Up"></TD>'+
   '<TD WIDTH="10%" ALIGN="center" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clintype'+counter+'" VALUE="Any"></TD></div>'+

   '<TD WIDTH="10%" ALIGN="center" BGCOLOR="#CCCCCC" HEIGHT="40" STYLE="border-left-style: solid; border-left-width: 5; border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1">'+
   '<INPUT TYPE="radio" NAME="clinstatus'+counter+'" VALUE="Reserved"></TD>'+
   '<TD WIDTH="10%" ALIGN="center" BGCOLOR="#CCCCCC" HEIGHT="40" STYLE="border-style: solid; border-width: 1">'+
   '<INPUT TYPE="radio" NAME="clinstatus'+counter+'" VALUE="Urgent"></TD>'+
   '</tr></table>  <input type="hidden" name="service'+counter+'" id="service'+counter+'">');.

I have a table with my rows in it and a row contains 3 td's with radio button's in them (im open for a redesign idea).

 

When i validate i get 'big' red boxes around each radio button and the text goes below and 'This field is required' appearing after the first radio button. ( bec i havnt got any validation on the page for it)

 

How do i create validation just for these and put some error msg somewhere appropriate?

    <tr rowheight=40 valign=bottom class="normal">
     <td class="normal"><input type="radio" name="rehabLevel" value="A" class="required">&nbsp; Hub - Category A</td>
     <td class="normal"><input type="radio" name="rehabLevel" value="B">&nbsp; Spoke - Category B</td>
     <td class="normal"><input type="radio" name="rehabLevel" value="I">&nbsp; Spoke - Individual Case Consideration</td>
    </tr>

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" media="screen" href="stylesheet.css" />//-->
<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>&nbsp;</td></tr>

    <tr rowheight=40 valign=bottom class="normal">
     <td class="normal"><input type="radio" name="rehabLevel" value="A" class="required">&nbsp; Hub - Category A</td>
     <td class="normal"><input type="radio" name="rehabLevel" value="B" class="required">&nbsp; Spoke - Category B</td>
     <td class="normal"><input type="radio" name="rehabLevel" value="I" class="required">&nbsp; 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>&nbsp;</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>&nbsp;</td>
     <td><input type="text" name="nextofkin_address2" size=20></td>
    </tr>    
    <tr>
     <td>&nbsp;</td>
     <td><input type="text" name="nextofkin_address3" size=20></td>
    </tr>    
    <tr>
     <td>&nbsp;</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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/<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>&nbsp;</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 &nbsp;<input type="radio" size=40 name="pm_sore" value="True">&nbsp;&nbsp;No &nbsp;<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>&nbsp;</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>

Can anyone please point me in the right direction for the various methods of validation.

 

Currently I have a form that I validate using Javascript (see below). what I need is when the user submits if a field isnt entered then the whole row is highlighted

 

ALSO

 

An asterix placed inline at the end of the row (all in line with other rows)

Any othr techniques you know of.

 

Cheers

Darryl

 

<tr><td><a href="#"  onclick="validateform();"><button>What's not completed</button></a></td></tr>
    <tr id="1"><td width="30%" class="header">Firstname</td><td width="60%"><input type="text" name="firstName" id="firstName" size="50" value="Darryl"></td></tr>
    <tr id="2"><td width="30%" class="header" id="tdSurname">Surname</td><td width="60%"><input type="text" name="surName" id="surName" size="50" value="Wilson"></td></tr>
    
    <tr id="3"><td width="30%" class="header" id="tdDOB">DOB</td><td width="60%"><input type="text" name="dob" id="dob" size="20" ></td></tr>
    <tr id="4"><td width="30%" class="header" name="tdGender">Gender</td><td width="60%" class="normal" name="tdGender">
     <input type="radio" name="gender" value="M" checked>&nbsp;Male&nbsp;
     <input type="radio" name="gender" value="F" >&nbsp;Female&nbsp;
     <input type="radio" name="gender" value="U" >&nbsp;Undisclosed
    </td></tr>

I have a page with divs and li's see below.

 

When i click submit the error message goes right through the radio buttons and underneath the text boxes.

 

How can I place each error message at a fixed (aligned) location on the same line as the object?

 

Also could you show me how I could highlight the WHOLE line in (say red) if its not been filled in or invalid.

 

 

Many thanks,Darryl

 

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Researcher Request Form to access RD&I Volunteer Database</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />   
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>   
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="/tonic_new/js/jquery.validate.js"></script>
<script language="javascript"> 
   
$(document).ready(function () {
          $("#form_540751").validate({
              rules: {
                  chkIRequire: {
                      required: true
                  },
                  chkSubjectGroup: {
                      required: true
                  },
                  chkGender: {
                      required: true
                  },
                  txtAgeFrom: {
                      required: true,
                      number: true
                  },
                  txtAgeTo: {
                      required: true,
                      number: true
                  },
                  chkSmoker: {
                    required: true
                  }
              },
              messages: {
                  chkIRequire: "Select what you require",
                  chkSubjectGroup: "Select your Subject Group",
                  chkGender: "Sselect your Gender",
                  element_1_15: "Please click the E-Signed to prove you have read this"
                 
              }
             
             
          });
  
});
$(function() {       
    $( "#DOBdatepicker" ).datepicker();       
});
</script>
<style type="text/css">
 .address {display:block; font-size:8pt; margin-right;8px; }
 h1 {text-align:center }
 
 form.cmxform {
  width: 370px;
  font-size: 1.0em;
  color: #333;
 }
 
 form.cmxform legend {
  padding-left: 0;
 }
 
 form.cmxform legend, form.cmxform label {
  color: #333;
 }
 
 form.cmxform fieldset {
  border: none;
  border-top: 1px solid #C9DCA6;
  background: url(../images/cmxform-fieldset.gif) left bottom repeat-x;
  background-color: #F8FDEF;
 }
 
 form.cmxform fieldset fieldset {
  background: none;
 }
 
 form.cmxform fieldset p, form.cmxform fieldset fieldset {
  padding: 5px 10px 7px;
  background: url(../images/cmxform-divider.gif) left bottom repeat-x;
 }
 
 label.error {
  /* remove the next line when you have trouble in IE6 with labels in list */
  color: red;
  font-style: italic;
 }
 div.error {
  background-color:#F3E6E6;
     border-color: #000000;
     border-style: solid solid solid none;
     border-width: 12px;
     padding: 5px;

 }
 input {color:#000000;}
 input.checkbox { border: none }
 input:focus { border: 1px dotted black; }
 input.error { border: 1px dotted red; }
 form.cmxform .gray * { color: gray; }

</style>
</head>
<body id="main_body"> 
 <div id="form_container">
  <div  style="background-image: url('images/nhs.jpg');background-position:right top; background-repeat:no-repeat;margin-right:3px;">
  <div style="position:relative; text-align:right;width:360px; height:50px;left:370px;top:10px;font-family:arial;font-size:18pt;">The Royal Liverpool and Broadgreen University Hospitals</div>
  <div style="position:relative; text-align:right;top:20px;margin-right:90px; font:12px arial grey;">NHS TRUST</div>
    <div style="position:relative; top:30px; text-align:right; margin-right:3px;">  
     <span class="address">Royal Liverpool University Hospital</span>
     <span class="address">Prescot street</span>
     <span class="address">Liverpool</span>
     <span class="address">L7 8XP</span>
     <span class="address"><br />Tel&nbsp;&nbsp;: 0151 706 2000</span>
     <span class="address">Fax: 0151 706 5806</span>   
    </div>
    <div style="width:180px; position:relative; top:-40px; left:420px;"><img src="images/consentlogo.jpg" width="180" height="70" border=0></div>
  </div>

  <h1>Consent to be included on a Register of Interest for Research</h1>
  
  <form id="form_540751" class="appnitro"  method="post" action="/development/RLU/researcher_request.asp">
  <div class="form_description">   
   <p>Please indicate whether you require only metrics around cohorts or full volunteer contact details:</p>
   <ul>
   <li id="li_3" >
    <label class="description" for="element_3">I require </label>
    <span>
     <input id="chkIRequire_1" name="chkIRequire" class="element radio" type="radio" value="Metrics Only" />
     <label class="choice" for="chkIRequire_1">Metrics Only</label>
     <input id="chkIRequire_2" name="chkIRequire" class="element radio" type="radio" value="Full Volunteer Contact Details" />
     <label class="choice" for="chkIRequire_2">Full Volunteer Contact Details</label>
    </span>
   </li>  
   </ul>
  </div> 
  <div class="form_description">   
   <h2>Section 1 : Subject Criteria</h2>
   <ul>
   <li id="li_3">
    <label class="description" for="element_3">Subject Group</label>
    <span>
     <input id="chkSubjectGroup_1" name="chkSubjectGroup" class="element radio" type="radio" value="Patients" />
     <label class="choice" for="chkSubjectGroup_1">Metrics Only</label>
     <input id="chkSubjectGroup_2" name="chkSubjectGroup" class="element radio" type="radio" value="Healthy Volunteers" />
     <label class="choice" for="chkIRequire_2">Full Volunteer Contact Details</label>
    </span>
   </li>  
   <li id="li_4">
    <label class="description" for="element_3">Gender</label>
    <span>
     <input id="chkGender_1" name="chkGender" class="element radio" type="radio" value="Male" />
     <label class="choice" for="chkSubjectGroup_1">Male</label>
     <input id="chkGender_2" name="chkGender" class="element radio" type="radio" value="Female" />
     <label class="choice" for="chkGender_2">Female</label>
    </span>
   </li>  
   <li id="li_5">
    <label class="description" for="element_3">Age Range</label>
    <span>
     <input id="txtAgeFrom_1" name="txtAgeFrom" class="element text" type="text" size=2 />
     <input id="txtAgeFrom_2" name="txtAgeTo" class="element text" type="text" size=2 />
    </span>
   </li>
   <li id="li_6">
    <label class="description" for="element_3">Smoker</label>
    <span>
     <input id="chkSmoker_1" name="chkSmoker" class="element radio" type="radio" value="Yes" />
     <label class="choice" for="chkSmoker_1">Yes</label>
     <input id="chkGender_2" name="chkSmoker" class="element radio" type="radio" value="No" />
     <label class="choice" for="chkSmoker_2">No</label>
     <input id="chkSmoker_3" name="chkSmoker" class="element radio" type="radio" value="Ex" />
     <label class="choice" for="chkSmoker_3">Ex</label>
     <input id="chkGender_4" name="chkSmoker" class="element radio" type="radio" value="Does not matter" />
     <label class="choice" for="chkSmoker_4">Does not matter</label>     
    </span>
   </li> 
   <li id="li_7">
    <label class="description" for="element_3">Disorder(s) subject <u>MUST</u> have:<br>(eg: Asthma, IBS etc)</label>
    <span>
     <textarea id="txtDisorderMustHave" name="txtDisorderMustHave" class="element textarea" cols=40 rows=5></textarea>

    </span>
   </li> 
   <li id="li_8">
    <label class="description" for="element_3">Disorder(s) subject <u>MUST NOT </u> have:<br>(eg: Asthma, IBS etc)</label>
    <span>
     <textarea id="txtDisorderMustNotHave" name="txtDisorderMustNotHave" class="element textarea" cols=40 rows=5></textarea>
    </span>
   </li>  
   <li id="li_9">
    <label class="description" for="element_3">Subjects(s) subject <u>MUST NOT </u> be allergic to:<br>(eg: Penicillin)</label>
    <span>
     <textarea id="txtSubjectsMustNotHave" name="txtSubjectsMustNotHave" class="element textarea" cols=40 rows=5></textarea>
    </span>
   </li>           
   <li id="li_10">
    <label class="description" for="element_3">Additional Criteria</label>
    <span>
     <textarea id="txtAdditional" name="txtAdditional" class="element textarea" cols=40 rows=5></textarea>
    </span>
   </li>     
   </ul>
  </div>       
  <div class="form_description">   
   <h2>Section 2 : Project Details</h2>
   <ul>
   <li id="li_11">
    <label class="description" for="element_3">Project Short Title</label>
    <span>
     <input id="txtProjectShortTitle" name="txtProjectShortTitle" class="element textbox" size=40 type="text" />
    </span>
   </li>  
   <li id="li_12">
    <label class="description" for="element_3">RD&I Number (if registered)</label>
    <span>
     <input id="txtRDINumber" name="txtRDINumber" class="element textbox" size=40 type="text" />
    </span>
   </li>  
   <li id="li_13">
    <label class="description" for="element_3">Number of subjects required</label>
    <span>
     Patients &nbsp;<input id="txtSubjects_Patients" name="txtSubjects_Patients" class="element textbox" type="text" size=2 />&nbsp;&nbsp;
     Healthy Volunteers&nbsp;<input id="txtSubjects_HealthyVolunteer" name="txtSubjects_HealthyVolunteer" class="element textbox" type="text" size=2 />
    </span>
   </li>
   <li id="li_14">
    <label class="description" for="element_3">Study Synopsis<p style="font-weight:0;">(please include protocol if project not registered</p></label>
    <span>
     <textarea id="txtStudySynopsis" name="txtStudySynopsis" cols=40 rows=4></textarea>
    </span>
   </li> 
   </ul>
  </div> 
  <div class="form_description">   
   <h2>Section 3 : Sign Off</h2>
   <ul>
   <li id="li_11">
    <label class="description" for="element_3">Researcher Name</label>
    <span>
     <input id="txtResearcher" name="txtResearcher" class="element textbox" size=40 type="text" />
    </span>
   </li>  
   <li id="li_12">
    <label class="description" for="element_3">Researcher Signature</label>
    <span>
     <input id="chkResearcher_ESig" name="chkResearcher_ESig" class="element checkbox" type="checkbox" value="1" />
    </span>
   </li>  
   <li id="li_13">
    <label class="description" for="element_3">Date</label>
    <span>
     <input id="txtSignOff_date_Day" name="txtSignOff_date_Day" class="element textbox" type="text" size=2 maxlength=2 />&nbsp;&nbsp;/&nbsp;&nbsp;
     <input id="txtSignOff_date_Month" name="txtSignOff_date_Month" class="element textbox" type="text" size=2 maxlength=2 />&nbsp;&nbsp;/&nbsp;&nbsp;
     <input id="txtSignOff_date_Year" name="txtSignOff_date_Year" class="element textbox" type="text" size=4 maxlength=4 />
    </span>
   </li>

   </ul>
   <h3>Thank you for completing this Form.</h3>
  </div>      
  <ul> 

  <li class="buttons">
       <input type="hidden" name="reload" value="1" />
   
    <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
  </li>
  </ul>
  <input type="hidden" name="patientId" value="">
  </form> 
  
 </div>

 </body>
</html>

I have:    <li id="li_9">
     <label class="description" for="element_9">Gender *</label>
     <span>
      <input id="element_9_1" name="element_9" class="required" type="radio" value="1" />
      <label class="choice" for="element_9_1">M</label>
      <input id="element_9_2" name="element_9" class="required" type="radio" value="2" />
      <label class="choice" for="element_9_2">F</label>
     </span>
    </li>  

 

Yet if none are chosen, the error message cuts right through the middle of the two radio boxes.

 

All the error messages appear UNDER the text/check boxes. Can i get the error to be aligned at the RHS of the page?

 

Cheers

Darryl

I have 3 tabs, on the first i have a list of items.

 

What I need is when you click on an item in tab 1 it opens tab 2 with a parameter that tab 2 can access

 

The scenario is Projects on tab 1 with a list of jobs on tab 2. But i only want info relating to the project selected on tab 1.

 

Is this possible. I guess I'd need to code tab 2 as a separate asp page and load it with ajax. or triggerTab

 

Darryl

Sorry if this long winded. Im struggling to find examples to help me do various methods of validation.

I'm using tables and not CSS (so no labels)

 

I have the code below and I would really lik eto know how I can validate it in various ways eg: highlight the whole line  put an asterix at the beginning /end of the error line. Summary and Warning

 

Plus say I have 3 boxes for dob how can i validate the whole as a date and give one error (as above).

 

Cheers

<!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" media="screen" href="stylesheet.css" />//-->
<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"
    },
    messages: {
     completedBy: "Please enter your firstname"
    }
   });
 });   
</script>
<style type="text/css">

#Proforma { width: 670px; }
#Proforma { width: 670px; }
#Proforma error {
 margin-left: 10px;
 width: auto;
 display: inline;
}

</style>
</head>
<form method="post" action="<%=sc%>" id="Proforma" name="Proforma">
<table width="80%">
 <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>
 <%if reload = 0 then %>
 <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 class="highlight">Please indicate Level of rehabilitation need and service required</td></tr>
    <tr><td colspan=3>&nbsp;</td></tr>

    <tr rowheight=40 valign=bottom class="normal">
     <td class="normal"><input type="radio" name="rehabLevel" value="A" class="required">&nbsp; Hub - Category A</td>
     <td class="normal"><input type="radio" name="rehabLevel" value="B">&nbsp; Spoke - Category B</td>
     <td class="normal"><input type="radio" name="rehabLevel" value="I">&nbsp; Spoke - Individual Case Consideration</td>
    </tr>
    <tr class="normal" align=left>
     <td colspan=3>
      <table width="100%" border=0>
       <tr>
        <td class="normal" width="30%">Name of person Completing form:</td>
        <td colspan=2><input type="text" name="completedBy" id="completedBy" size="30" style="border:1px;"  ></td>
       </tr>
       <tr>
        <td class="normal">Email of person Completing form:</td>
        <td colspan=2><input type="text" name="completedByEmail" id="completedByEmail" size="30" style="border:1px;"  ></td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr><td colspan=2>&nbsp;</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"></td></tr>    
    <tr><td class="normal">First Name:</td><td><input type="text" size="20" name="firstname" id="firstname"></td></tr>    
    <tr><td class="normal">Date of Birth:</td><td><input type="text" size="20" name="dob" id="dob"></td></tr>    
    <tr><td class="normal">Address:</td><td><input type="text" size="20" name="address1" id="address1"></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"></td></tr>    
    
   </table>
  </td>
  <td align=left>
   <table width="100%" style="border:1px solid black;padding-left:20px;height:267px;" border=0>
    <tr>
     <td class="heading">GP:</td>
     <td><input type="text" name="gp" size=20></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></td>
    </tr>
    <tr>
     <td class="heading">Address:</td>
     <td><input type="text" name="nextofkin_address1" size=20></td>
    </tr>
    <tr>
     <td>&nbsp;</td>
     <td><input type="text" name="nextofkin_address2" size=20></td>
    </tr>    
    <tr>
     <td>&nbsp;</td>
     <td><input type="text" name="nextofkin_address3" size=20></td>
    </tr>    
    <tr>
     <td>&nbsp;</td>
     <td><input type="text" name="nextofkin_address4" size=20></td>
    </tr>
    <tr>
     <td class="heading">Tel No:</td>
     <td><input type="text" name="nextofkin_telNo" size=20></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></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></td></tr>
    <tr><td class="heading">Description of condition</td><td><input type="text" size="20" name="condition" id="condition"></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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/<br>illness</td>
     <td><input type="text" name="dateOfCondition" id="dateOfCondition" /></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>&nbsp;</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 &nbsp;<input type="radio" size=40 name="pm_sore" value="True">&nbsp;&nbsp;No &nbsp;<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>&nbsp;</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>
 <%else%>
 <tr><td><h1>Your Referral was sent successfully</h1></td></tr>
 <%end if%>
</table>
<input type="hidden" name="reload" value=1>
</form>
<body>

</body>
</html>

Ive meanaged to create a modal ajax popup but it hardcodes to a html file. Casn I get it to pass a parameter of the current object id to the modal and send it to an asp page with the parameter?

 

I use tables to create a form and I want to validate it.

 

eg:

    <tr><td class="normal">Surname:</td><td><input type="text" size="20" name="surname" id="surname"></td></tr>    
    <tr><td class="normal">First Name:</td><td><input type="text" size="20" name="firstname" id="firstname"></td></tr>    
    <tr><td class="normal">Date of Birth:</td><td><input type="text" size="20" name="dob" id="dob"></td></tr>    
    <tr><td class="normal">Address:</td><td><input type="text" size="20" name="address1" id="address1"></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"></td></tr> 

 

How can I use the validation plugin to validate in different ways

eg: highlight the error element / Put an asterix next to the element etc

 

Cheers

I have 3 elements on the same row (below) but I end up with 3 error messages on the same line, which is crap. Is there a way of creating a date and checking its validity and displaying ONE error message?

 :

   <tr>
    <td width="30%"><label for="dob">Date of Birth </label></td>
    <td width="40%"><input type="text" id="dobDay"  name="dobDay" size="4" value="day" onFocus="this.value='';" maxlength=2 /> / <input type="text" id="dobMonth"  name="dobMonth" size="4"  value="month" onFocus="this.value='';" maxlength=2 validate="required:true,range: [1,12]" /> / <input type="text" id="dobYear"  name="dobYear" size="4"  value="year" onFocus="this.value='';" maxlength=4 /></td>
    <td width="30%"></td>
   </tr>

With the validation rules:

    dobDay: {
     required:true,
     number:true
    },
    dobMonth: {
     required:true,
     number:true,
     range: [1,12]
    },
    dobYear: {
     required:true,
     number:true,
     maxlength:4,
     minlength:4
    },
    contactMethod: {
     required: true,
     minlength:1
    },    
    typeOfMS: {
     required:true,
     minlength:1
    }
    ,
    dmt: {
     required:true,
     minlength:1
    },
    edss: {
      required:true,
      minlength:1
    },
    email: { required: function() {
        return $("#noEmail").is(":checked");
        },
        email: true
    },
    DiagnosisMonth: {
     number:true,
     required:false
    },
    DiagnosisYear: {
     number:true,
     required:true
    },
    qol: {
     required:true,
     minlength:1
    },
    completedOther: { required: function() {
     return $("#selCompletedBy").val()=='Other';
     }     
    }
   },messages: {
    contactMethod : "Please select at least one contact Method",
    typeOfMS      : "Please select your Type of MS",
    dmt           : "Please select a therapy",
    edss          : "Please select the EDSS Band",
    postcode      : "Please enter a valid postcode",
    telephone     : "Please enter your telephone number",
    email         : "Please enter a valid email address",
    DiagnosisMonth: "Enter a valid month between 1 and 12",
    DiagnosisYear : "Enter a valid year",
    qol           : "Please select the patients' Quality of Life",
    dobDay        : "Day",
    dobMonth      : "Month",
    dobYear       : "Year",
    completedOther : "Who completed this form"
   }
  });

I have had to remove the datepicker and replace it by 3 text boxes.

My question is how do I create a validate rule to check that the 3 text boxes (d/m/y) = a valid date.

 

I am using the traditional rules and messages method.

 

also i only want one error message (currently i get 3 erorr messages for each text box - not good)

 

cheers

Darryl

I have the following code:

      <select name="selCompletedBy" id="selCompletedBy">
       <option value="Dr">Dr</option>
       <option value="Nurse">Nurse</option>
       <option value="Therapist">Therapist</option>
       <option value="Psychologist">Psychologist</option>
       <option value="Other">Other</option>
      </select>
       

<input type="text" name="completedOther" id="completedOther" size="45" maxlength="50" validate="required:true" >

 

Then in the validation :
    completedOther: {   required: "#selCompletedBy.selectedvalue=='Other'"     }

 

But this causes an error. How do i make the completedOther text field required if the selCompletedBy = 'Other'

 

Thanks

I have a dropdown with an option for 'Other'

 

I would like it to validate the text box (and display an error msg with the rest of the validation) for being empty IF the user selects Other from the dropdown. Also it would be nice if the text box for the Other was hidden until the user selects Other from the dropdown.

 

I am using the usual jquery rules and messages, but i have no idea how to do this.

 

Cheers

Darryl

I downloaded the code below to allow the user to add another form element if required. It works BUT it places the text from the previous text box into the new one.

 

I want to create an email page where the user can create as many recipents as possible, but this isnt acceptable. How do i modify the code to remove the clone and just create a new form element?

 

Cheers

Darryl

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"                    
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>    
<title></title>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>      
<script type="text/javascript">        
$(document).ready(function() {            
 $('#btnAdd').click(function() {                
  var num     = $('.clonedInput').length;                
  var newNum  = new Number(num + 1);                  
  var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);                  
  newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);                
  $('#input' + num).after(newElem);                
  $('#input' + num).html='';  
  $('#btnDel').attr('disabled','');                  
  //if (newNum == 5)                    
  // $('#btnAdd').attr('disabled','disabled');            
 });              
 $('#btnDel').click(function() {                
  var num = $('.clonedInput').length;                  
  $('#input' + num).remove();                
  $('#btnAdd').attr('disabled','');                  
  if (num-1 == 1)                    
   $('#btnDel').attr('disabled','disabled');            
 });              
 $('#btnDel').attr('disabled','disabled');        
});    
</script>
</head>  
<body>  
<form id="myForm">    
 <div id="input1" style="margin-bottom:4px;" class="clonedInput">Name: <input type="text" name="name1" id="name1" /></div>      
 <div>        
  <input type="button" id="btnAdd" value="add another name" />        
  <input type="button" id="btnDel" value="remove name" />    
 </div>
</form>  
</body>