How to style the HTML5 form validation messages?

JavaScript form validation

I need this form to validate and it just doesn't quite. These are the following required fields: Label Name Default Appt Date PopupApptFldDateGlob mm/dd/yyyy Time Start PopupApptFldTimeStartGlob Visitor's Name PopupApptFldNameGlob Staff Name PopupApptFldStaffNameGlob Staff Extension PopupApptFldStaffPhoneGlob If any of these are blank then I need the form to NOT submit. I have little validations functions for changes and blurs, and those are working OK, but the submit still allows fields to be blank! I am sure an expert will just see this and fix it, then the money and a tip are yours. -------------------------------------------------------------------------- <HTML><HEAD><TITLE>New Appointment</TITLE>  <style type="text/css"> th { background-color: rgb(64,94,153); font-family: verdana, arial, helvetica, sans-serif; font-size:medium; color:#FFFFFF; text-align:left; vertical-align:top; font-weight: normal; } .tdLabel { font-family: verdana, arial, helvetica, sans-serif; font-size: xx-small; color:rgb(64,94,153); white-space: nowrap; } .tdLabel2 { font-family: verdana, arial, helvetica, sans-serif; font-size: x-small; color:rgb(64,94,153); white-space: nowrap; } .label3 { font-family: verdana, arial, helvetica, sans-serif; font-size: xx-small; color:rgb(64,94,153); white-space: nowrap; margin-top: 2; margin-bottom: 4; } .field { font-family: verdana, arial, helvetica, sans-serif; font-size: xx-small; color:rgb(000,000,000); text-align:center; white-space: nowrap; border: solid thin; border-style: inset; } .field2 { font-family: verdana, arial, helvetica, sans-serif; font-size: xx-small; color:rgb(000,000,000); text-align:left; white-space: nowrap; border: solid thin; border-style: inset; } .label2 { font-family: verdana, arial, helvetica, sans-serif; font-size: xx-small; color:rgb(64,94,153); text-align:left; white-space: nowrap; margin-top: -2; margin-bottom: -1; } .tdleft { border-left: solid 0.01em black; } .tdright { border-right: solid 0.01em black; } .tdbottom { border-bottom: solid 0.01em black; } .tdtop { border-top: solid 0.01em black; border-left: solid 0.01em black; border-right: solid 0.01em black; } .tdcornerLL { border-left: solid 0.01em black; border-bottom: solid 0.01em black; } .tdcornerLR { border-right: solid 0.01em black; border-bottom: solid 0.01em black; } td.date {border: inset 0.01em; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=Gainsboro,endColorStr=white); float: left; text-align: center; color: gray; font-size: xx-small; font-family: verdana, arial, helvetica, sans-serif; cursor:pointer; } td.hovering {border: inset 0.01em; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=Gainsboro,endColorStr=white); float: left; text-align: center; color: blue; font-weight: bold; font-size: xx-small; font-family: verdana, arial, helvetica, sans-serif; cursor:pointer; } td.selected { border: inset 0.01em; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=Gainsboro,endColorStr=white); float: left; text-align: center; color: blue; font-weight: bold; font-size: xx-small; font-family: verdana, arial, helvetica, sans-serif; cursor:pointer; } td.hoveringselected { border: inset 0.01em; filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=Gainsboro,endColorStr=white); float: left; text-align: center; color: blue; font-weight: bold; font-size: xx-small; font-family: verdana, arial, helvetica, sans-serif; cursor:pointer; } .tdInvisible { visibility: hidden;} </style>    <script type="text/javascript"> function Get_Cookie(name) { var start = document.cookie.indexOf(name+"="); var len = start+name.length+1; if ((!start) && (name != document.cookie.substring(0,name.length))) return null; if (start == -1) return null; var end = document.cookie.indexOf(";",len); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(len,end)); } function Set_Cookie(name,value) { document.cookie = name + "=" +escape(value); } // Associative array to record which days are currently selected var days = new Object(); // Return the current table cell in a browser-independent way function cell_d(d) { if (document.getElementById) return document.getElementById(d); else return document.all[d]; } // Highlight the text when the mouse hovers over it function entered_d(d) { if (days[d]) cell_d(d).className = 'hoveringselected'; else cell_d(d).className = 'hovering'; } // Unhighlight the text when the mouse moves away function exited_d(d) { if (days[d]) cell_d(d).className = 'selected'; else cell_d(d).className = 'date'; } // Update things when the user clicks on some day function clicked_d(d) { // Toggle this day's entry in the associative array days[d] = !days[d]; // Set the color to show whether the day is selected if (days[d]) cell_d(d).className = 'hoveringselected'; else cell_d(d).className = 'hovering'; // Update the multi-line list of selected days var selected = document.forms['newAppt'].elements['web_ApptRepEachCalendar']; selected.value = ''; if (days['Mon']) selected.value += '\nMon'; if (days['Tue']) selected.value += '\nTue'; if (days['Wed']) selected.value += '\nWed'; if (days['Thu']) selected.value += '\nThu'; if (days['Fri']) selected.value += '\nFri'; if (days['Sat']) selected.value += '\nSat'; if (days['Sun']) selected.value += '\nSun'; } </script>  <script type="text/javascript"> // Associative array to record which days are currently selected var monthDays = new Object(); // Return the current table cell in a browser-independent way function cell_mD(mD) { if (document.getElementById) return document.getElementById(mD); else return document.all[mD]; } // Highlight the text when the mouse hovers over it function entered_mD(mD) { if (monthDays[mD]) cell_mD(mD).className = 'hoveringselected'; else cell_mD(mD).className = 'hovering'; } // Unhighlight the text when the mouse moves away function exited_mD(mD) { if (monthDays[mD]) cell_mD(mD).className = 'selected'; else cell_mD(mD).className = 'date'; } // Update things when the user clicks on some day function clicked_mD(mD) { // Toggle this day's entry in the associative array monthDays[mD] = !monthDays[mD]; // Set the color to show whether the day is selected if (monthDays[mD]) cell_mD(mD).className = 'hoveringselected'; else cell_mD(mD).className = 'hovering'; // Update the multi-line list of selected monthDays var selected = document.forms['newAppt'].elements['web_ApptRepEachCalendar']; selected.value = ''; if (monthDays['1']) selected.value += '\n1'; if (monthDays['2']) selected.value += '\n2'; if (monthDays['3']) selected.value += '\n3'; if (monthDays['4']) selected.value += '\n4'; if (monthDays['5']) selected.value += '\n5'; if (monthDays['6']) selected.value += '\n6'; if (monthDays['7']) selected.value += '\n7'; if (monthDays['8']) selected.value += '\n8'; if (monthDays['9']) selected.value += '\n9'; if (monthDays['10']) selected.value += '\n10'; if (monthDays['11']) selected.value += '\n11'; if (monthDays['12']) selected.value += '\n12'; if (monthDays['13']) selected.value += '\n13'; if (monthDays['14']) selected.value += '\n14'; if (monthDays['15']) selected.value += '\n15'; if (monthDays['16']) selected.value += '\n16'; if (monthDays['17']) selected.value += '\n17'; if (monthDays['18']) selected.value += '\n18'; if (monthDays['19']) selected.value += '\n19'; if (monthDays['20']) selected.value += '\n20'; if (monthDays['21']) selected.value += '\n21'; if (monthDays['22']) selected.value += '\n22'; if (monthDays['23']) selected.value += '\n23'; if (monthDays['24']) selected.value += '\n24'; if (monthDays['25']) selected.value += '\n25'; if (monthDays['26']) selected.value += '\n26'; if (monthDays['27']) selected.value += '\n27'; if (monthDays['28']) selected.value += '\n28'; if (monthDays['29']) selected.value += '\n29'; if (monthDays['30']) selected.value += '\n30'; if (monthDays['31']) selected.value += '\n31'; } </script>  <script type="text/javascript"> // Associative array to record which days are currently selected var months = new Object(); // Return the current table cell in a browser-independent way function cell_m(m) { if (document.getElementById) return document.getElementById(m); else return document.all[m]; } // Highlight the text when the mouse hovers over it function entered_m(m) { if (months[m]) cell_m(m).className = 'hoveringselected'; else cell_m(m).className = 'hovering'; } // Unhighlight the text when the mouse moves away function exited_m(m) { if (months[m]) cell_m(m).className = 'selected'; else cell_m(m).className = 'date'; } // Update things when the user clicks on some day function clicked_m(m) { // Toggle this day's entry in the associative array months[m] = !months[m]; // Set the color to show whether the day is selected if (months[m]) cell_m(m).className = 'hoveringselected'; else cell_m(m).className = 'hovering'; // Update the multi-line list of selected months var selected = document.forms['newAppt'].elements['web_ApptRepEachCalendar']; selected.value = ''; if (months['Jan']) selected.value += '\nJan'; if (months['Feb']) selected.value += '\nFeb'; if (months['Mar']) selected.value += '\nMar'; if (months['Apr']) selected.value += '\nApr'; if (months['May']) selected.value += '\nMay'; if (months['Jun']) selected.value += '\nJun'; if (months['Jul']) selected.value += '\nJul'; if (months['Aug']) selected.value += '\nAug'; if (months['Sep']) selected.value += '\nSep'; if (months['Oct']) selected.value += '\nOct'; if (months['Nov']) selected.value += '\nNov'; if (months['Dec']) selected.value += '\nDec'; } </script>  <script type="text/javascript"> function setFlagRep() { // Update the field that shows the cell's text document.forms['newAppt'].elements['PopupApptFlagRepGlob'].value = 1; document.forms['newAppt'].elements['PopupApptRepOnDayFlagGlob'].value = 1; } </script>  <script type="text/javascript"> function confirmBox(){ var logout = confirm("Please confirm your appointment information. Would you like to book this appointment?") if (logout==true) { //if user pressed OK return true; //take them to another page } else { //if user pressed Cancel return false; } } </script> <script language = "Javascript"> // Declaring valid date character, minimum year and maximum year var dtCh= "/"; var minYear=1900; var maxYear=2100; function isInteger(s){ var i; for (i = 0; i < s.length; i++){ // Check that current character is number. var c = s.charAt(i); if (((c < "0") || (c > "9"))) return false; } // All characters are numbers. return true; } function stripCharsInBag(s, bag){ var i; var returnString = ""; // Search through string's characters one by one. // If character is not in bag, append to returnString. for (i = 0; i < s.length; i++){ var c = s.charAt(i); if (bag.indexOf(c) == -1) returnString += c; } return returnString; } function daysInFebruary (year){ // February has 29 days in any year evenly divisible by four, // EXCEPT for centurial years which are not also divisible by 400. return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 ); } function DaysArray(n) { for (var i = 1; i <= n; i++) { this[i] = 31 if (i==4 || i==6 || i==9 || i==11) {this[i] = 30} if (i==2) {this[i] = 29} } return this } function isDate(dtStr){ var daysInMonth = DaysArray(12) var pos1=dtStr.indexOf(dtCh) var pos2=dtStr.indexOf(dtCh,pos1+1) var strMonth=dtStr.substring(0,pos1) var strDay=dtStr.substring(pos1+1,pos2) var strYear=dtStr.substring(pos2+1) strYr=strYear if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1) if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1) for (var i = 1; i <= 3; i++) { if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1) } month=parseInt(strMonth) day=parseInt(strDay) year=parseInt(strYr) if (pos1==-1 || pos2==-1){ alert("The date format should be : mm/dd/yyyy") return false } if (strMonth.length<1 || month<1 || month>12){ alert("Please enter a valid month") return false } if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){ alert("Please enter a valid day") return false } if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){ alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear) return false } if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){ alert("Please enter a valid date") return false } return true } function ValidateStartDate(){ var dt=document.newAppt.PopupApptFldDateGlob if (isDate(dt.value)==false){ dt.focus() } return } function ValidateEndDate(){ var dt=document.newAppt.endGlob if (isDate(dt.value)==false){ dt.focus() } return } function ValidateStaff() { var txt=document.newAppt.PopupApptFldStaffNameGlob if (txt.value=="") { alert ("Please enter a staff name") txt.focus() } return } function ValidateVisitor() { var txt=document.newAppt.PopupApptFldNameGlob if (txt.value=="") { alert ("Please enter a visitor name") txt.focus() } return } function ValidateApptTime(indexNum) { if (indexNum > -1) { return; } else { alert("Please select a start time for the appointment") } } function ValidateEndAfter() { var txt=document.newAppt.PopupApptRepEndCounterGlob; if (txt.value=="") { alert ("Please enter how many times the appointment should repeat"); txt.focus(); } return; } function StoreStaff() { var txt=document.newAppt.PopupApptFldStaffNameGlob; Set_Cookie("staffName",txt.value); var txt=Get_Cookie("staffName"); } function StoreExt() { var txt=document.newAppt.PopupApptFldStaffPhoneGlob; Set_Cookie("staffExt",txt.value); var txt=Get_Cookie("staffExt"); } function validateMe(){ ValidateStartDate(); ValidateVisitor(); ValidateApptTime(this.PopupApptFldTimeStartGlob.selectedIndex); } function LoadMe1() { var txt=Get_Cookie("staffName"); if (txt==null) { return true; } else { document.newAppt.PopupApptFldStaffNameGlob.value = txt; } window.focus(); return true; } function LoadMe2() { var txt=Get_Cookie("staffExt"); if (txt==null) { return true; } else { document.newAppt.PopupApptFldStaffPhoneGlob.value = txt; } window.focus(); return true; } function LoadMe() { LoadMe1(); LoadMe2(); } </script> </HEAD> <BODY leftmargin="0" topmargin="0" onLoad="LoadMe(); return true;" BGCOLOR="rgb(138,151,202)"><A NAME="home"> <FORM onSubmit="return validateMe();" NAME="newAppt" >  <TABLE BGCOLOR="rgb(138,151,202)" CELLPADDING=10 CELLSPACING=0 BORDER=0><TR><TD WIDTH=367 ALIGN="left" VALIGN="top">  <TABLE BORDER=0 BGCOLOR="#FFFFFF" CELLPADDING=2 CELLSPACING=0> <TR><TH COLSPAN=6>[FMP-CurrentDay:Long]    [FMP-CurrentDate]</TH></TR> <TR> <TD HEIGHT="12" COLSPAN=6 class="tdtop"><P STYLE="FONT-SIZE:xx-small;"> </P></TD> </TR> <TD WIDTH=10 class="tdleft"> </TD> <TD class="tdLabel">* Appt Date</TD> <TD><INPUT NAME="PopupApptFldDateGlob" TYPE="TEXT" VALUE="mm/dd/yyyy" SIZE=15 class="field" onChange="return ValidateStartDate()"></INPUT></TD> <TD class="tdLabel">Appt Type</TD> <TD><select name="PopupApptLinkTypeGlob" class="field">[FMP-option: PopupApptLinkTypeGlob, list=web_ApptTypes]</select></TD> <TD WIDTH=10 class="tdright"> </TD> </TR> <TR> <TD WIDTH=10 class="tdleft"> </TD> <TD class="tdLabel" vALIGN="top">* Time Start</TD> <TD><select name="PopupApptFldTimeStartGlob" class="field" size="14" onBlur="ValidateApptTime(this.selectedIndex)">[FMP-option: PopupApptFldTimeStartGlob, list=Times]</select></TD>    <TD class="tdLabel"> </TD> <TD> </TD> <TD WIDTH=10 class="tdright"> </TD> </TR> <TR> <TD WIDTH=10 class="tdleft"> </TD> <TD COLSPAN=4><P class="label2">* Visitor's Name</P><INPUT NAME="PopupApptFldNameGlob" TYPE="TEXT" VALUE="" SIZE=62 class="field2" onBlur="ValidateVisitor()"></INPUT></TD> <TD WIDTH=10 class="tdright"> </TD> </TR> <TR> <TD WIDTH=10 class="tdleft"> </TD> <TD COLSPAN=4><P class="label2">Company</P><INPUT NAME="PopupApptFldCompanyGlob" TYPE="TEXT" VALUE="" SIZE=62 class="field2"></INPUT></TD> <TD WIDTH=10 class="tdright"> </TD> </TR> <TR> <TD WIDTH=10 class="tdleft"> </TD> <TD HEIGHT="24" COLSPAN=4> </TD> <TD WIDTH=10 class="tdright"> </TD> </TR> <TR> <TD WIDTH=10 class="tdleft"> </TD> <TD class="tdLabel">Staff</TD> <TD COLSPAN=2><INPUT NAME="PopupApptFldStaffNameGlob" TYPE="TEXT" VALUE="" class="field" SIZE=27 onBlur="ValidateStaff()" onChange="StoreStaff()"></INPUT><P class="label2">* Name</P></TD> <TD><INPUT NAME="PopupApptFldStaffPhoneGlob" TYPE="TEXT" VALUE="" SIZE=15 class="field" onChange="StoreExt()"></INPUT><P class="label2">* Extension</P></TD> <TD WIDTH=10 class="tdright"> </TD> </TR> <TR> <TD WIDTH=10 class="tdleft"> </TD> <TD HEIGHT="24" COLSPAN=4> </TD> <TD WIDTH=10 class="tdright"> </TD> </TR> <TR> <TD WIDTH=10 class="tdcornerLL"> </TD> <TD COLSPAN=4 class="tdbottom" ALIGN=center><INPUT NAME="reset" TYPE="reset" VALUE="Cancel"></INPUT>   <INPUT NAME="-Edit" TYPE="SUBMIT" VALUE="Schedule Appointment"></INPUT></TD> <TD WIDTH=10 class="tdcornerLR"> </TD> </TR> </TABLE>  </TD> <TD>  <TABLE BORDER=1 CELLPADDING=2 BGCOLOR=white WIDTH=400>  <TR VALIGN="top"><TD Width=160 class="tdlabel2"><input type="radio" name="PopupApptRepModeNameGlob" value="Daily" onClick="setFlagRep();">Daily<P class="label3">     Every <INPUT TYPE="TEXT" NAME="PopupApptRepEveryNumGlob" VALUE="" class="field" SIZE=3></INPUT> day(s)</P></TD>  <TD class="tdlabel2"><input type="radio" name="PopupApptRepModeNameGlob" value="Weekly" onClick="setFlagRep();">Weekly<P class="label3">     Every <INPUT TYPE="TEXT" NAME="PopupApptRepEveryNumGlob" VALUE="" class="field" SIZE=3></INPUT> week(s) on:</P> <TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0 ALIGN="center"> <TR> <TD class="date" id="Mon" WIDTH=30 HEIGHT=10 onmouseover="entered_d('Mon');" onmouseout="exited_d('Mon');" onmousedown="clicked_d('Mon');" > Mon</TD> <TD class="date" id="Tue" WIDTH=30 HEIGHT=10 onmouseover="entered_d('Tue');" onmouseout="exited_d('Tue');" onmousedown="clicked_d('Tue');" > Tue</TD> <TD class="date" id="Wed" WIDTH=30 HEIGHT=10 onmouseover="entered_d('Wed');" onmouseout="exited_d('Wed');" onmousedown="clicked_d('Wed');" > Wed</TD> </TR> <TR> <TD class="date" id="Thu" onmouseover="entered_d('Thu');" onmouseout="exited_d('Thu');" onmousedown="clicked_d('Thu');" > Thu</TD> <TD class="date" id="Fri" onmouseover="entered_d('Fri');" onmouseout="exited_d('Fri');" onmousedown="clicked_d('Fri');" > Fri</TD> <TD class="date" id="Sat" onmouseover="entered_d('Sat');" onmouseout="exited_d('Sat');" onmousedown="clicked_d('Sat');" > Sat</TD> </TR> <TR> <TD class="date" id="Sun" HEIGHT=10 onmouseover="entered_d('Sun');" onmouseout="exited_d('Sun');" onmousedown="clicked_d('Sun');" > Sun</TD> <TD HEIGHT=10> </TD> <TD HEIGHT=10> </TD> </TR> </TABLE><P>  </TD></TR><TR VALIGN="top"><TD class="tdlabel2"> <input type="radio" name="PopupApptRepModeNameGlob" Value="Monthly" onClick="setFlagRep();">Monthly<P class="label3">     Every <INPUT TYPE="TEXT" NAME="PopupApptRepEveryNumGlob" VALUE="" class="field" SIZE=3></INPUT> month(s) each:</P> <TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0 ALIGN=center> <TR> <TD class="date" id="1" WIDTH=15 onmouseover="entered_mD('1');" onmouseout="exited_mD('1');" onmousedown="clicked_mD('1');" > 1</TD> <TD class="date" id="2" WIDTH=15 onmouseover="entered_mD('2');" onmouseout="exited_mD('2');" onmousedown="clicked_mD('2');" > 2</TD> <TD class="date" id="3" WIDTH=15 onmouseover="entered_mD('3');" onmouseout="exited_mD('3');" onmousedown="clicked_mD('3');" > 3</TD> <TD class="date" id="4" WIDTH=15 onmouseover="entered_mD('4');" onmouseout="exited_mD('4');" onmousedown="clicked_mD('4');" > 4</TD> <TD class="date" id="5" WIDTH=15 onmouseover="entered_mD('5');" onmouseout="exited_mD('5');" onmousedown="clicked_mD('5');" > 5</TD> <TD class="date" id="6" WIDTH=15 onmouseover="entered_mD('6');" onmouseout="exited_mD('6');" onmousedown="clicked_mD('6');" > 6</TD> <TD class="date" id="7" WIDTH=15 onmouseover="entered_mD('7');" onmouseout="exited_mD('7');" onmousedown="clicked_mD('7');" > 7</TD> </TR> <TR> <TD class="date" id="8" onmouseover="entered_mD('8');" onmouseout="exited_mD('8');" onmousedown="clicked_mD('8');" > 8</TD> <TD class="date" id="9" onmouseover="entered_mD('9');" onmouseout="exited_mD('9');" onmousedown="clicked_mD('9');" > 9</TD> <TD class="date" id="10" onmouseover="entered_mD('10');" onmouseout="exited_mD('10');" onmousedown="clicked_mD('10');" > 10</TD> <TD class="date" id="11" onmouseover="entered_mD('11');" onmouseout="exited_mD('11');" onmousedown="clicked_mD('11');" > 11</TD> <TD class="date" id="12" onmouseover="entered_mD('12');" onmouseout="exited_mD('12');" onmousedown="clicked_mD('12');" > 12</TD> <TD class="date" id="13" onmouseover="entered_mD('13');" onmouseout="exited_mD('13');" onmousedown="clicked_mD('13');" > 13</TD> <TD class="date" id="14" onmouseover="entered_mD('14');" onmouseout="exited_mD('14');" onmousedown="clicked_mD('14');" > 14</TD> </TR> <TR> <TD class="date" id="15" onmouseover="entered_mD('15');" onmouseout="exited_mD('15');" onmousedown="clicked_mD('15');" > 15</TD> <TD class="date" id="16" onmouseover="entered_mD('16');" onmouseout="exited_mD('16');" onmousedown="clicked_mD('16');" > 16</TD> <TD class="date" id="17" onmouseover="entered_mD('17');" onmouseout="exited_mD('17');" onmousedown="clicked_mD('17');" > 17</TD> <TD class="date" id="18" onmouseover="entered_mD('18');" onmouseout="exited_mD('18');" onmousedown="clicked_mD('18');" > 18</TD> <TD class="date" id="19" onmouseover="entered_mD('19');" onmouseout="exited_mD('19');" onmousedown="clicked_mD('19');" > 19</TD> <TD class="date" id="20" onmouseover="entered_mD('20');" onmouseout="exited_mD('20');" onmousedown="clicked_mD('20');" > 20</TD> <TD class="date" id="21" onmouseover="entered_mD('21');" onmouseout="exited_mD('21');" onmousedown="clicked_mD('21');" > 21</TD> </TR> <TR> <TD class="date" id="22" onmouseover="entered_mD('22');" onmouseout="exited_mD('22');" onmousedown="clicked_mD('22');" > 22</TD> <TD class="date" id="23" onmouseover="entered_mD('23');" onmouseout="exited_mD('23');" onmousedown="clicked_mD('23');" > 23</TD> <TD class="date" id="24" onmouseover="entered_mD('24');" onmouseout="exited_mD('24');" onmousedown="clicked_mD('24');" > 24</TD> <TD class="date" id="25" onmouseover="entered_mD('25');" onmouseout="exited_mD('25');" onmousedown="clicked_mD('25');" > 25</TD> <TD class="date" id="26" onmouseover="entered_mD('26');" onmouseout="exited_mD('26');" onmousedown="clicked_mD('26');" > 26</TD> <TD class="date" id="27" onmouseover="entered_mD('27');" onmouseout="exited_mD('27');" onmousedown="clicked_mD('27');" > 27</TD> <TD class="date" id="28" onmouseover="entered_mD('28');" onmouseout="exited_mD('28');" onmousedown="clicked_mD('28');" > 28</TD> </TR> <TR> <TD class="date" id="29" onmouseover="entered_mD('29');" onmouseout="exited_mD('29');" onmousedown="clicked_mD('29');" > 29</TD> <TD class="date" id="30" onmouseover="entered_mD('30');" onmouseout="exited_mD('30');" onmousedown="clicked_mD('30');" > 30</TD> <TD class="date" id="31" onmouseover="entered_mD('31');" onmouseout="exited_mD('31');" onmousedown="clicked_mD('31');" > 31</TD> <TD> </TD> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE><TABLE> <TR><TD class="tdLabel" ALIGN=right>On the</TD><TD><select name="PopupApptRepOnWeekOfMonthGlob" class="field">[FMP-option: PopupApptRepOnWeekOfMonthGlob, list=web_DayNums]</select><select name="PopupApptRepOnDayNameGlob" class="field">[FMP-option: PopupApptRepOnDayNameGlob, list=Web_WeekDays]</select></TD></TR></TABLE> </TD><TD class="tdlabel2"> <input type="radio" name="PopupApptRepModeNameGlob" value="Yearly" onClick="setFlagRep();">Yearly<P class="label3">     Every <INPUT TYPE="TEXT" NAME="PopupApptRepEveryNumGlob" VALUE="" class="field" SIZE=3></INPUT> years(s) in:</P> <TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0 ALIGN="center"> <TR> <TD class="date" id="Jan" WIDTH=30 onmouseover="entered_m('Jan');" onmouseout="exited_m('Jan');" onmousedown="clicked_m('Jan');" > Jan</TD> <TD class="date" id="Feb" WIDTH=30 onmouseover="entered_m('Feb');" onmouseout="exited_m('Feb');" onmousedown="clicked_m('Feb');" > Feb</TD> <TD class="date" id="Mar" WIDTH=30 onmouseover="entered_m('Mar');" onmouseout="exited_m('Mar');" onmousedown="clicked_m('Mar');" > Mar</TD> </TR> <TR> <TD class="date" id="Apr" onmouseover="entered_m('Apr');" onmouseout="exited_m('Apr');" onmousedown="clicked_m('Apr');" > Apr</TD> <TD class="date" id="May" onmouseover="entered_m('May');" onmouseout="exited_m('May');" onmousedown="clicked_m('May');" > May</TD> <TD class="date" id="Jun" onmouseover="entered_m('Jun');" onmouseout="exited_m('Jun');" onmousedown="clicked_m('Jun');" > Jun</TD> </TR> <TR> <TD class="date" id="Jul" onmouseover="entered_m('Jul');" onmouseout="exited_m('Jul');" onmousedown="clicked_m('Jul');" > Jul</TD> <TD class="date" id="Aug" onmouseover="entered_m('Aug');" onmouseout="exited_m('Aug');" onmousedown="clicked_m('Aug');" > Aug</TD> <TD class="date" id="Sep" onmouseover="entered_m('Sep');" onmouseout="exited_m('Sep');" onmousedown="clicked_m('Sep');" > Sep</TD> </TR> <TR> <TD class="date" id="Oct" onmouseover="entered_m('Oct');" onmouseout="exited_m('Oct');" onmousedown="clicked_m('Oct');" > Oct</TD> <TD class="date" id="Nov" onmouseover="entered_m('Nov');" onmouseout="exited_m('Nov');" onmousedown="clicked_m('Nov');" > Nov</TD> <TD class="date" id="Dec" onmouseover="entered_m('Dec');" onmouseout="exited_m('Dec');" onmousedown="clicked_m('Dec');" > Dec</TD> </TR> </TABLE><P><TABLE> <TR><TD class="tdLabel" ALIGN=right HEIGHT=40>On the</TD><TD><select name="PopupApptRepOnWeekOfMonthGlob" class="field">[FMP-option: PopupApptRepOnWeekOfMonthGlob, list=web_DayNums]</select><select name="PopupApptRepOnDayNameGlob" class="field">[FMP-option: PopupApptRepOnDayNameGlob, list=Web_WeekDays]</select></TD></TR></TABLE>  </TD></TR>  <TR><TD COLSPAN=2 ALIGN=CENTER><TABLE><TR><TD class="tdLabel"> <input type="radio" name="PopupApptRepEndDateFlagGlob" value=""></INPUT>End After </TD><TD class="tdLabel"><INPUT TYPE="TEXT" NAME="PopupApptRepEndCounterGlob" value="1" class="field" SIZE="3" onBlur="ValidateEndAfter()"></INPUT>time(s)</TD></TR><TR><TD class="tdLabel"> <input type="radio" name="PopupApptRepEndDateFlagGlob" value="">End On </TD><TD class="tdLabel"><INPUT TYPE="TEXT" NAME="endGlob" class="field" onBlur="ValidateEndDate()"></INPUT></TD></TR></TABLE></TD></TR> </TABLE> </TD></TR></TABLE>  <P> <INPUT NAME="-DB" TYPE="Hidden" VALUE="_Utility.fp5"></INPUT> <INPUT NAME="-LAY" TYPE="Hidden" VALUE="cgi"></INPUT> <INPUT NAME="-FORMAT" TYPE="Hidden" VALUE="thankyou.htm"></INPUT> <INPUT NAME="-RecID" TYPE="Hidden" VALUE="[FMP-CurrentRecID]"></INPUT> <INPUT NAME="-Script" TYPE="Hidden" VALUE="__Appt_OK_web"></INPUT>   <textarea name="web_ApptRepEachCalendar" rows=7 cols=10 class="tdInvisible"></textarea><BR> <INPUT NAME="PopupApptFlagRepGlob" TYPE="text" class="tdInvisible"></INPUT> <INPUT NAME="PopupApptLinkRepIDXGlob" TYPE="text" class="tdInvisible" VALUE=""></INPUT> <INPUT NAME="PopupApptLinkCurrIDXGlob" TYPE="text" class="tdInvisible" VALUE=""></INPUT> <P><INPUT NAME="PopupApptRepOnDayFlagGlob" TYPE="text" VALUE=""></INPUT> </FORM> </BODY> </HTML>
Answer:

Hi nosneb-ga, This is a sample Javascript function you can use for validating the fields you mentioned: function ValidateForm() { retval = true; var required = "The following fields are required:\n\n"; if (!isDate(document.newAppt.PopupApptFldDateGlob.value)) { required += "- Appointment date (mm/dd/yyy)\n"; retval = false; } if (document.newAppt.PopupApptFldTimeStartGlob.value=="") { required += "- Start time\n"; retval = false; } if (document.newAppt.PopupApptFldNameGlob.value=="") { required += "- Visitor's name\n"; retval = false; } if (document.newAppt.PopupApptFldStaffNameGlob.value=="") { required += "- Staff name\n"; retval = false; } if (document.newAppt.PopupApptFldStaffPhoneGlob.value=="") { required += "- Staff extension\n"; retval = false; } if (retval) { return true; } else { alert(required); return false; } } In order for this to work, you need to modify the submit button as follows: <INPUT NAME="-Edit" TYPE="SUBMIT" ONCLICK="javascript:return ValidateForm();" VALUE="Schedule Appointment" /> By using the 'return' statement in the onclick handler of the input button, the form will only by actually submitted if 'ValidateForm' returns true. With this example it should be easy to add or modify validation checks. If you run into any trouble, please request a clarification. Best regards, rhansenne-ga. Here are some references on Javascript form validation: Form Validation: http://www.yourhtmlsource.com/javascript/formvalidation.html JavaScript in forms: http://www.quirksmode.org/js/forms.html Javascript form validation ? doing it right : http://www.xs4all.nl/~sbpoley/webmatters/formval.html

nosneb-ga at Google Answers Visit the source

Was this solution helpful to you?

Related Q & A:

Is there email validation baked in to Rails 3?Best solution by coverhound.com
Is it OK to increase validation checks and decrease min gradient while training neural network?Best solution by Cross Validated
Why is Javascript called Javascript, if it has nothing to do with Java?Best solution by Stack Overflow
How does the form validation work on angularjs with ionic?Best solution by blog.nraboy.com
What info do I need for debt validation letter?Best solution by Yahoo! Answers

Just Added Q & A:

How many active mobile subscribers are there in China?Best solution by Quora
How to find the right vacation?Best solution by bookit.com
How To Make Your Own Primer?Best solution by thekrazycouponlady.com
How do you get the domain & range?Best solution by ChaCha
How do you open pop up blockers?Best solution by Yahoo! Answers

For every problem there is a solution! Proved by Solucija.

Got an issue and looking for advice?
Ask Solucija to search every corner of the Web for help.
Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.