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 : 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 <input id="txtSubjects_Patients" name="txtSubjects_Patients" class="element textbox" type="text" size=2 />
Healthy Volunteers <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 /> /
<input id="txtSignOff_date_Month" name="txtSignOff_date_Month" class="element textbox" type="text" size=2 maxlength=2 /> /
<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>