Quote:
Originally Posted by LearningCoder
Yup I made this error a year ago where I only validated my form with JS. Definitely use a server-side language like PHP as you know it will always validate, regards of what the user tries to do (i.e they can't switch off PHP) 
Can you post your form code please?
Regards,
LC. |
Thank you for your reply. I haven't learnt PHP yet and my computer is not set up to take it. I am going to learn it next year. This is all I have to do for this exercise, but I would like to get the validation, when it comes up with an error to say that the person is not old enough to purchase Adult Books for the cursor to return to the Subject input box. That is choose Childrens Books.
At the moment when submit is clicked it goes to to the email regardless.
I would appreciate any other suggestions - it is supposed to be a simple exercise. The other thing is, in the footer I need to have the full day and the the rest of the date coming up when the program was last updated. At the moment I have the day and the date with (for example) Monday Mon 10 December 2012 coming up with the date.
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>home</title>
<link href="mystyles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" language="javascript" src="date_time.js" </script>
function bigImg(x)
{
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x)
{
x.style.height="32px";
x.style.width="32px";
}
</script>
<script>
function validateForm(){
var x = document.forms["myForm"]["lastname"].value;
x = x.replace(/^\s+/,""); // strip leading spaces
x1 = x.replace(/[^a-z]/gi,""); // strip non-alpha chars
if ((/[^a-z\s&'-\.]/gi.test(x)) || (x.length == 0) || (x1.length < 2)) {
alert ("Last name must be filled out - only alpha characters (2 minimum), space, apostrophe, hyphen, full stop and & are valid in this field");
myForm.lastname.focus();
return false;
}
var x = document.forms["myForm"]["firstname"].value;
x = x.replace(/^\s+/,""); // strip leading spaces
x1 = x.replace(/[^a-z]/gi,""); // strip non-alpha chars
if ((/[^a-z\s&'-\.]/gi.test(x)) || (x.length == 0) || (x1.length < 2)) {
alert ("First name must be filled out - only alpha characters (2 minimum), space, apostrophe, hyphen, full stop and & are valid in this field");
myForm.firstname.focus();
return false;
}
var x=document.forms["myForm"]["address"].value
if (x==null || x==""){
alert("Address must be filled out");
myForm.address.focus();
return false;
}
var x=document.forms["myForm"]["suburb"].value
if (x==null || x==""){
alert("Suburb must be filled out");
myForm.suburb.focus();
return false;
}
var x=document.forms["myForm"]["state"].value
if(x=="") {alert ( "Please select your State." );
myForm.state.focus();
return false;
}
var x=document.forms["myForm"]["postcode"].value
if (x==null || x==""){
alert("Postcode must be filled out")
myForm.postcode.focus();
return false;
}
if (!IsNumeric(x)){
alert("Please enter only numbers in the Postcode field")
return false;
}
var x=document.forms["myForm"]["cphone"].value
if (x==null || x=="") {
alert("Contact Phone must be filled out")
myForm.cphone.focus();
return false;
}
if (!IsNumeric(x)) {
alert("Please enter only numbers in the Contact Phone field")
myForm.cphone.focus();
return false;
}
var x=document.forms["myForm"]["email"].value
if (x==null || x==""){
alert("Email must be filled out");
myForm.email.focus();
return false;
} else {
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("Not a valid e-mail address");
myForm.email.focus();
return false;
}
}
var x=document.forms["myForm"]["subject"].value
if (x==null || x==""){
alert("Please select an interest");
myForm.subject.focus();
return false;
}
var x=document.forms["myForm"]["field"].value
if (x==null || x==""){
alert("Please fill out your Date of Birth in the requested format")
myForm.field.focus();
return false;
}
if (!ageCount()){
alert("Please fill out your Date of Birth in the requested format")
myForm.field.focus();
return false;
}
return true;
}
</script>
<script>
function check_date(field)
{
var checkstr = "0123456789";
var DateField = field;
var Datevalue = "";
var DateTemp = "";
var seperator = "/";
var day;
var month;
var year;
var leap = 0;
var err = 0;
var i;
var retValue = true;
err = 0;
DateValue = DateField//.value;
/* Delete all chars except 0..9 */
for (i = 0; i < DateValue.length; i++) {
if (checkstr.indexOf(DateValue.substr(i,1)) >= 0) {
DateTemp = DateTemp + DateValue.substr(i,1);
}
}
DateValue = DateTemp;
/* Always change date to 8 digits - string*/
/* if year is entered as 2-digit / always assume 20xx */
if (DateValue.length == 6) {
DateValue = DateValue.substr(0,4) + '20' + DateValue.substr(4,2); }
if (DateValue.length != 8) {
err = 19;}
/* year is wrong if year = 0000 */
year = DateValue.substr(4,4);
if (year == 0) {
err = 20;
}
/* Validation of month*/
month = DateValue.substr(2,2);
if ((month < 1) || (month > 12)) {
err = 21;
}
/* Validation of day*/
day = DateValue.substr(0,2);
if (day < 1) {
err = 22;
}
/* Validation leap-year / february / day */
if ((year % 4 == 0) || (year % 100 == 0) || (year % 400 == 0)) {
leap = 1;
}
if ((month == 2) && (leap == 1) && (day > 29)) {
err = 23;
}
if ((month == 2) && (leap != 1) && (day > 28)) {
err = 24;
}
/* Validation of other months */
if ((day > 31) && ((month == "01") || (month == "03") || (month == "05") || (month == "07") || (month == "08") || (month == "10") || (month == "12"))) {
err = 25;
}
if ((day > 30) && ((month == "04") || (month == "06") || (month == "09") || (month == "11"))) {
err = 26;
}
/* if 00 ist entered, no error, deleting the entry */
if ((day == 0) && (month == 0) && (year == 00)) {
err = 0; day = ""; month = ""; year = ""; seperator = "";
}
/* if no error, write the completed date to Input-Field (e.g. 13.12.2001) */
if (err == 0) {
DateField.value = day + seperator + month + seperator + year;
}
/* Error-message if err != 0 */
else {
alert("Date is incorrect!");
//DateField.select();
//DateField.focus();
retValue= false;
}
return retValue;
}
</script>
<script>
function ageCount() {
var field=document.forms["myForm"] ["field"].value
if (check_date(field)==false){return false};
var date1 = new Date();
var dob= document.getElementById("field").value;
var date2=new Date(dob);
var pattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/; //Regex to validate date format (dd/mm/yyyy)
if (pattern.test(dob)) {
var y1 = date1.getFullYear(); //getting current year
var y2 = date2.getFullYear(); //getting dob year
var age = y1 - y2; //calculating age
var selected=document.getElementById("myForm").subject.value;
if
(age < 18 && selected == "ABooks") {
alert('Your age is under 18 and you have ordered an Adult Book. Sorry you are not able to purchase Adult Books. Please choose Childrens Books');
}
alert("Age : " + age);
return true;
} else {
alert("Invalid date format. Please Input in (dd/mm/yyyy) format!");
return false;
}
}
</script>
<script>
function IsNumeric(sText){
var ValidChars = "0123456789.";
var IsNumber=true;
var Char;
for (i = 0; i < sText.length && IsNumber == true; i++){
Char = sText.charAt(i);
if (ValidChars.indexOf(Char) == -1){
IsNumber = false;
}
}
return IsNumber;
}
</script>
<!--
Limit the number of characters per textarea
function textCounter(field,cntfield,maxlimit) {
if (field.value.length > maxlimit){// if too long...trim it!
field.value = field.value.substring(0, maxlimit);
}else{
// otherwise, update 'characters left' counter
cntfield.value = maxlimit - field.value.length;
}
}
</SCRIPT>
<script>
function getVal() {
var val = document.getElementById("subject").value;
var emadd = "hmpk@spin.net.au";
if (val !=0) {
emadd = emadd +"?subject=" + val;
alert (emadd);
}
}
-->
</head>
<body onload="SetFocus()">
<p>
Today is:
<span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>
<script>
var d = new Date()
var time = d.getHours()
if (time < 12)
{
document.write ( " Good Morning")
}
else
{
if (time == 12)
{
document.write ( " It is noon. Good Day")
}
else
{
if (time >12)
{
document.write ( " Good afternoon")
}
}
}
</script>
<p>
<p>
<script>
function gatherBody(){
var f = document.forms["myForm"]["lastname"].value;
var s = document.forms["myForm"]["firstname"].value;
var a = document.forms["myForm"]["address"].value;
var t = document.forms["myForm"]["suburb"].value;
var st = document.forms["myForm"]["state"].value;
var pc = document.forms["myForm"]["postcode"].value;
var p = document.forms["myForm"]["cphone"].value;
var e = document.forms["myForm"]["email"].value;
var dob = document.forms["myForm"]["field"].value;
var d = document.forms["myForm"]["comments"].value;
var gB = "Custumer_Enquiry_Details"+"\n"+"---------------------------------------------------------------"+"\n"+"Last_Name:"+f+"\n"+"First_name:"+s+"\n"+"Address:"+a+"\n"+"Suburb:"+t+"\n"+"State:"+st+"\n"+ "Postcode:"+pc+"\n"+"Contact_Phone:"+p+"\n"+"Email:"+e+"\n"+"Date_of_Birth:"+dob+"\n"+"Comments:"+d+ "\n"+"---------------------------------------------------------------"+"\n";
document.forms["myForm"]["body"].value=gB;
}
</script>
<script type="text/javascript">
function sub() {
if(validateForm()) {
gatherBody();
return true;
}
return false;
}
</script>
</script>
<table width="100%" border="4" class="headerborder" id="styling">
<!--This table depicts the graphics and Logo for Helen's Website-->
<tr>
<th width="15%"><div align="left"><img src="images/sittingatdesk.jpg" width="300" height="300">
<th width="85%" width-"100%"> <div align="center">
<p>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
HELEN'S WEBSITE</h1>
<a href="" onMouseOver="document.MyImage.src='images/HOLLAND 2012.jpg';"
onMouseOut="document.MyImage.src='images/seaside1.jpg';"</a>
<img src="images/seaside1.jpg" name="MyImage" width="500" height="200">
</th>
</tr>
</table>
<form id="myForm" method="get" enctype="text/plain" action="mailto:books@books.com.au" onSubmit="return sub()">
<table width="100%" cellspacing="10" cellpadding="1">
<TBODY>
<tr>
<td colspan="2" align="center"><strong>APPLICATION/ENQUIRY FORM </strong></td></tr>
<tr>
<td colspan="2" align="center"><strong>Personal Details:</strong></td>
</tr>
<tr>
<td align="right"><strong>* Last Name</strong></td>
<td><input name="lastname" type="text" id="lastname" value=""></td>
<td> <input type="hidden" id="body" name="body"/> </td>
</tr>
<tr>
<td align="right"><strong>* First Name</strong></td>
<td><input name="firstname" type="text" id="firstname" value=""></td>
</tr>
<tr>
<td align="right"><strong>* Address</strong></td>
<td><input name="address" type="text" id="address" value=""></td>
</tr>
<tr>
<td align="right"><strong>* Suburb</strong></td>
<td><input name="town" type="text" id="suburb" value =""></td>
</tr>
<tr>
<td align="right"><strong>* State</strong></td>
<td><select name="state">
<option value="" selected></option>
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="ACT">ACT</option>
<option value="VIC">VIC</option>
<option value="WA">WA</option>
<option value="SA">SA</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
</select></td>
</tr>
<tr>
<td align="right"><strong>* Postcode</strong></td>
<td><input name="postcode" type="text" id="postcode" value ="" ></td>
</tr>
<tr>
<td align="right"><strong>* Contact Phone</strong ></td>
<td><input name="cphone" type="text" id="cphone" value = ""></td>
</tr>
<tr>
<td align="right"><strong>* Email</strong></td>
<td><input name="email" type="text" id="email" size="35" maxlength="35" value=""></td>
</tr>
<tr>
<td align="right"><strong>* Please select your area of interest:</strong></td>
<td colspan="20" align="left">
<select name="subject" id="subject">
<option value=""selected></option>
<option value="CBooks">Books for Children</option>
<option value="ABooks">Books for Adults</option>
</select></td></tr>
<p>
<tr>
<td align="right"><strong>* Please enter your date of birth: </strong>
<td><h6>Insert your date of birth in format dd/mm/yyyy <br>
<input id="field" type="text" value="" name="field" maxlength="10" size="15"></h6></td>
</td>
</tr>
<tr>
<td align="right" valign="top"><strong>Comments</strong><br></td>
<td><textarea name="comments" cols="45" rows="10" id="comments" lengthcut="true" onKeyDown="textCounter(document.myForm.comments,document.myForm.remLen1,150)" onKeyUp="textCounter(document.myForm.comments,document.myForm.remLen1,150)"></textarea></td>
</tr>
<tr>
<td colspan="2" align=center>
<input type="submit" id="submit" name="submit" value="SUBMIT"/>
<p> <input onclick="formreset()" value="Reset" type="reset"></p> </td>
</tr>
</TBODY>
</table>
<p></p>
</form>
<p>
<hr align="JUSTIFY" />
<p class="footer" align="center">
<script type="text/javascript">
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var fullVersion = ''+parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
fullVersion = nAgt.substring(verOffset+6);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
fullVersion = nAgt.substring(verOffset+7);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
(verOffset=nAgt.lastIndexOf('/')) )
{
browserName = nAgt.substring(nameOffset,verOffset);
fullVersion = nAgt.substring(verOffset+1);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
// trim the fullVersion string at semicolon/space if present
if ((ix=fullVersion.indexOf(";"))!=-1)
fullVersion=fullVersion.substring(0,ix);
if ((ix=fullVersion.indexOf(" "))!=-1)
fullVersion=fullVersion.substring(0,ix);
majorVersion = parseInt(''+fullVersion,10);
if (isNaN(majorVersion)) {
fullVersion = ''+parseFloat(navigator.appVersion);
majorVersion = parseInt(navigator.appVersion,10);
}
document.write(''
+'Browser name = You are using: '+browserName+'<br>'
+'Full version = '+fullVersion+'<br>'
+'Major version = '+majorVersion+'<br>'
)
</SCRIPT>
<p>
<script
type="text/JavaScript"
language="JavaScript">
<!--
//
// format date as dd-mmm-yy
// example: 12-Jan-99
//
function date_ddmmmyy(date)
{
var d = date.getDate();
var m = date.getMonth() + 1;
var y = date.getYear();
// handle different year values
// returned by IE and NS in
// the year 2000.
if(y >= 2000)
{
y -= 2000;
}
if(y >= 100)
{
y -= 100;
}
// could use splitString() here
// but the following method is
// more compatible
var mmm =
( 1==m)?'Jan'
2==m)?'Feb'
3==m)?'Mar':
( 4==m)?'Apr'
5==m)?'May'
6==m)?'Jun':
( 7==m)?'Jul'
8==m)?'Aug'
9==m)?'Sep':
(10==m)?'Oct'
11==m)?'Nov':'Dec';
return "" +
(d<10?"0"+d:d) + "-" +
mmm + "-" +
(y<10?"0"+y:y);
}
//
// get last modified date of the
// current document.
//
function date_lastmodified()
{
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var lmd = document.lastModified;
var lastDate = new Date(lmd);
return weekday[lastDate.getDay()] + " " + lastDate;
}
//
// finally display the last modified date
// as DD-MMM-YY
//
document.write(
"This page was updated on " +
date_lastmodified() );
// -->
</script>
<p> </p>
<p> </p>
<p> </p>
<p></p>
<p></p>
<hr align="JUSTIFY" />
<p align="center" class="footer">
<hr>
<p class="footer" align="center">Copyright © - Website created by Kaye Company</p>
<script type="text/javascript" language="JavaScript">
document.forms['myForm'].elements['lastname'].focus()
</script>
</body>
</html>
</code>
Before you post, read our: 
