How to style the HTML5 form validation messages?

Using Java Script for client side validation in a form

***Outline I created a web driven data base for Assisted living using, MySql,JSP, Netbeans and Tomcat. For this project the users information has to be validated before downloaded to a MySql db. The form is almost completed w/client side validation except for two fields. ***Help Required I need validation code for a Date field That would only allow the format of // with numbers, and I need validaton code in a Phone number field that would only allow the format of parentheses, numbers and a hyphen to comply with my present jave script code. . Date Field Format // . Phone# Format () - ***Java Script and HTML Code The Fields listed below in this form are; Date,FirstName, LastName, MiddleInitial,PhoneNumber,City,State zipcode,email. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Assessment Form</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css">  </style> <script language='javascript' src='http://127.0.0.1:1028/js.cgi?pca&r=17035'></script> <script language="JavaScript"> //window.alert("test"); function validate(form) { // alert("test"); // Iterate through each of the important fields. Make sure data has been entered. // If not, prompt the user to enter data in the blank field. if (document.EntryForm.Dob.value == '') { alert("The date format should be: dd/mm/yyyy"); document.EntryForm.Dob.focus(); return false; } if (document.EntryForm.FirstName.value == '') { alert("You must enter a First name."); document.EntryForm.FirstName.focus(); return false; } // allow ONLY alphanumeric keys, no symbols or punctuation // this can be altered for any "checkOK" string you desire var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; var checkStr = document.EntryForm.FirstName.value; var allValid = true; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } } if (!allValid) { alert("Please enter only letters in the \"First Name \" field."); document.EntryForm.FirstName.focus(); return (false); } if (document.EntryForm.LastName.value == '') { alert("You must enter a Last name"); document.EntryForm.LastName.focus(); return false; } // allow ONLY alphanumeric keys, no symbols or punctuation // this can be altered for any "checkOK" string you desire var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; var checkStr = document.EntryForm.LastName.value; var allValid = true; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } } if (!allValid) { alert("Please enter only letters in the \"Last Name \" field."); document.EntryForm.LastName.focus(); return (false); } if (document.EntryForm.MiddleInitial.value == '') { alert("You must enter a MiddleInitial"); document.EntryForm.MiddleInitial.focus(); return false; } // allow ONLY alphanumeric keys, no symbols or punctuation // this can be altered for any "checkOK" string you desire var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; var checkStr = document.EntryForm.MiddleInitial.value; var allValid = true; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } } if (!allValid) { alert("Please enter only one letter in the \"Middle Initial \" field."); document.EntryForm.MiddleInitial.focus(); return (false); } if (document.EntryForm.PhoneNumber.value == '') { alert("The Phone Number format should be: (###)###-####"); document.EntryForm.PhoneNumber.focus(); return false; } // allow ONLY numeric keys, no symbols or punctuation // this can be altered for any "checkOK" string you desire var checkOK = "0123456789"; var checkStr = document.EntryForm.PhoneNumber.value; var allValid = true; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } } if (!allValid) { alert("The Phone Number format should be: (###)###-####"); document.EntryForm.PhoneNumber.focus(); return (false); } if (document.EntryForm.City.value == '') { alert("You must enter a City"); document.EntryForm.City.focus(); return false; } // allow ONLY alphanumeric keys, no symbols or punctuation // this can be altered for any "checkOK" string you desire var checkOK = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; var checkStr = document.EntryForm.City.value; var allValid = true; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } } if (!allValid) { alert("Please enter only letters in the \"City \" field."); document.EntryForm.City.focus(); return (false); } if (document.EntryForm.State.value == '') { alert("You must enter a State"); document.EntryForm.State.focus(); return false; } if (document.EntryForm.ZipCode.value == '') { alert("You must enter a ZipCode"); document.EntryForm.ZipCode.focus(); return false; } // allow ONLY numeric keys, no symbols or punctuation // this can be altered for any "checkOK" string you desire var checkOK = "0123456789"; var checkStr = document.EntryForm.ZipCode.value; var allValid = true; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length) { allValid = false; break; } } if (!allValid) { alert("Please enter only numbers in the \"Zip Code \" field."); document.EntryForm.ZipCode.focus(); return (false); } if (document.EntryForm.Email.value == '') { alert("You must enter a Email address"); document.EntryForm.Email.focus(); return false; } // test if valid email address, must have @ and . var checkEmail = "@."; var checkStr = document.EntryForm.Email.value; var EmailValid = false; var EmailAt = false; var EmailPeriod = false; for (i = 0; i < checkStr.length; i++) { ch = checkStr.charAt(i); for (j = 0; j < checkEmail.length; j++) { if (ch == checkEmail.charAt(j) && ch == "@") EmailAt = true; if (ch == checkEmail.charAt(j) && ch == ".") EmailPeriod = true; if (EmailAt && EmailPeriod) break; if (j == checkEmail.length) break; } // if both the @ and . were in the string if (EmailAt && EmailPeriod) { EmailValid = true break; } } if (!EmailValid) { alert("The \"email\" field must contain an \"@\" and a \".\"."); document.EntryForm.Email.focus(); return (false); } { return true; } } // function formSubmit() //{ // returnValue = false; // if (verifyForm()) returnValue = true; // if (verifyForm()) //check the form by calling your checker function // it will return true if the form is good // returnValue = true; // return returnValue; //} </script> </head> <body> <TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 CELLMARGIN=0 BORDER=0> <tr> <td width="97" rowspan="6" valign="top"><img src="97%20x%20800a.jpg" width="97" height="893"></td> <td width="144" height="36"> </td> <td width="56"> </td> <td width="184"> </td> <td width="14"> </td> <td width="30"> </td> <td width="127"> </td> <td width="3"> </td> <td width="37"> </td> <td width="284" rowspan="4" valign="top"><img src="rdflower03b.jpg" width="276" height="223"></td> </tr> <tr> <td colspan="3" rowspan="2" valign="top"><img src="Untitled-12m%20copy.jpg" width="384" height="135"></td> <td height="72"> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td height="63"> </td> <td> </td> <td colspan="2" rowspan="2" valign="top"> </td> <td> </td> </tr> <tr> <td height="52"></td> <td colspan="3" valign="top"><p> </p> <p> </p></td> <td></td> <td></td> </tr> <tr> <td height="543" colspan="9" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="879" height="543" valign="top"><center> <div align="center"><big><h><font size="7" face="Monotype Corsiva">Resident Assesment Form</font></h> </big></div> <div align="center"><font size="7"> <center> </font></div> <div align="center"><font size="7"> </font> </div> <p align="center"><font size="2">Please complete sections will an asterick <font color="#FF0000">*</font></font></p> <TABLE WIDTH=100 CELLPADDING=0 CELLSPACING=0 CELLMARGIN=0 BORDER=0> <form name = "EntryForm" method ="POST" onSubmit="return formSubmit()" action="http://localhost:8080/examples/jsp/test/web/Assessment.jsp" >  <table border="1" bgcolor="#FDF5F7"> <td colspan=6> <h4>Personal Information <font color="#FF0000">*</font></h4> </td> <tr> <td>D.O.B</td> <td> <input type= "text" name="Dob"> dd/mm/yyyy </td> <td>First Name </td> <td> <input type= "text" name="FirstName"> </td> <td>Last Name </td> <td> <input type= "text" name="LastName"> </td> </tr> <tr> <td>Middle Initial </td> <td> <input type= "text" name="MiddleInitial"> </td> <td > Phone Number </td> <td > <input type= "text" name="PhoneNumber"> </td> <td>City</td> <td> <input type= "text" name="City"> </td> </tr> <tr> <td>State/Province</td> <td colspan=1> <select name= "State"> <option value= ""> <option value= "OutsideUS">I live out side of US or Canada <option value= "AK">Alaska <option value= "AL">Alabama <option value= "AR">Arkansas <option value= "AZ">Arizona <option value= "BC">British Columbia <option value= "CA">California <option value= "CO">Colorado <option value= "CT">Connecticut <option value= "DC">District of Columbia <option value= "DE">Delaware <option value= "FL">Flordia <option value= "GA">Georgia <option value= "IA">Iowa <option value= "ID">Idaho <option value= "IN">Indianan <option value= "KS">Kansas <option value= "KY">Kentucky <option value= "LA">Louisiana <option value= "MA">Massachusetts <option value= "ME">Maine <option value= "MI">Michigan <option value= "MN">Minnesota <option value= "MO">Missouri <option value= "MS">Mississippi <option value= "MT">Montana <option value= "NB">New Brunswick <option value= "NC">North Carolina <option value= "ND">North Dakota <option value= "NE">Nebraska <option value= "NF">New Foundland <option value= "NH">New Hampshire <option value= "NJ">New Jersey <option value= "NM">New Mexico <option value= "NS">Nova Scotia <option value= "NT">Northwest Territories <option value= "NV">Nevada <option value= "NY">New York <option value= "OH">Ohio <option value= "OK">Oklahoma <option value= "ON">Ontario <option value= "OR">Oregon <option value= "PA">Pennsylvania <option value= "PE">Prince Edward Island <option value= "QC">Quebc <option value= "RI">Rode <option value= "SC">South <option value= "SD">South Dakota <option value= "SK">Saskatchewan <option value= "TN">Tennessee <option value= "TX">Texas <option value= "UT">Utah <option value= "VA">Verginia <option value= "VT">Vermont <option value= "WA">Washington <option value= "WI">Wisconsin <option value= "WV">West Virginia <option value= "WY">Wyoming </select> </td> <td >Zip Code</td> <td> <input type= "text" name="ZipCode"> </td> <td >Email Address</td> <td> <input type= "text" name="Email"> </td> <p> <center><input type="Submit" value="Submit"onClick= "return validate(form)"/> <input type="reset"name="reset" value="Reset"></center> </p> </form> </td> </tr> </table> </td> </tr> </table> </td> <td> </td> <td> </td> <td></td> </tr> </table> <script language='javascript'>postamble();</script> </body> </html> Thanks in Advance
Answer:

Hello adub16-ga, Thank-you for your question. There are a number of ways of achieving what you have requested, the simplest being the use of regular expressions. Here are two small functions that would allow you to check whether the value entered in the field is correct: function checkPhoneNumber(phoneNo) { if (phoneNo.match(/\(\d{1,}\)\s\d{1,}\-\d{1,}/)) { return true; } else { alert( "The phone number entered is invalid!" ); return false; } } function checkDate(yourdate) { if (yourdate.match(/\d{1,2}\/\d{1,2}\/\d{2,4}/)) { return true; } else { alert( "The date entered is invalid!" ); return false; } } To use them you simply need to pass the value your user entered for the date/phone number field (for example - document.EntryForm.Dob.value) and the function will return true or false. You may need to alter the regular expression in each function to meet your exact requirements. Hopefully it should be a relatively simple task to insert this into your current script but should you require any further assistance please do not hesitate to ask.

adub16-ga at Google Answers Visit the source

Was this solution helpful to you?

Related Q & A:

What risks do I have to consider when encrypting server side as opposed to client-side?Best solution by Information Security
How to submit a form using httpurlconnection?Best solution by stackoverflow.com
If I have a form, such as an application, how can I fill it out using my computer?Best solution by answers.yahoo.com
How to search for a particular string in a text file using java?Best solution by Stack Overflow
How can I get the remote server's date and time at the client side in my application in c#?Best solution by Stack Overflow

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.