this won't validate!! any suggestions? it for some reason doesn't call the ValidateFrom function...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<title>User Details</title>
<script type="text/javascript">

function validateForm(){
  
  var x=document.forms["myForm"]["username"].value
if (x==null || x=="")
  {
  alert("username must be filled out");
  return false;
  }
  
  var y=document.forms["myForm"]["email"].value
if (y==null || y=="")
  {
  alert("email must be filled out");
  return false;
  }
  
  var z=document.forms["myForm"]["firstname"].value
if (z==null || z=="")
  {
  alert("firstname must be filled out");
  return false;
  }
  
  var a=document.forms["myForm"]["surname"].value
if (a==null || a=="")
  {
  alert("surname must be filled out");
  return false;
  }
  
  var b=document.forms["myForm"]["birthday"].value
if (b==null || b=="")
  {
  alert("birthday must be filled out");
  return false;
  }
  
  var c=document.forms["myForm"]["password"].value
if (c==null || c=="")
  {
  alert("password must be filled out");
  return false;
  }
  
  var d=document.forms["myForm"]["pwdconfirm"].value
if (d==null || d=="")
  {
  alert("pwdconfirm must be filled out");
  return false;
  }
  
  var e=document.forms["myForm"]["gender"].value
if (e=="nothing")
  {
  alert("gender must be chosen");
  return false;
  }
  validateEmail();
}

function validateEmail(){
	echo "i got to here.. ";
	var h=document.forms["myForm"]["email"].value
	var atpos=h.indexOf("@");
	var dotpos=h.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=h.length){
		alert("Not a valid e-mail address");
		return false;
	}
validateDate();
 }
 
 function validateDate(){
 var chkdate = document.forms["myForm"]["birthday"].value
	if(chkdate.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/)){
	  alert("works out");
	}
	else{
		alert("date format is wrong");
		return false;
	}
 }
 
</script>
</head>
<body>
<div class="center">
<h1>Enter your details user!!</h1>
<form name = "myForm" id = "myForm" action = "display.php" onsubmit = "return validateForm()"  method = "post" novalidate="novalidate">
<table border = "1">
<tr>
	<td>Username: </td>
	<td><input type="text" name="username" /></td>
</tr>
<tr>
	<td>Email: </td>
	<td><input type="email" name="email" /></td>
</tr>
<tr>
	<td>First name: </td>
	<td><input type="text" name="firstname" /></td>
</tr>
<tr>
	<td>Surname: </td>
	<td><input type="text" name="surname" /></td>
</tr>
<tr>
	<td>Date of Birth(YYY-MM-DD): </td>
	<td><input type="date" name="birthday" /></td>
</tr>
<tr>
	<td>Password: </td>
	<td><input type="password" name="password" /></td>
</tr>
<tr>
	<td>Password Confirm: </td>
	<td><input type="password" name="pwdconfirm" /></td>
</tr>
<tr>
	<td>Gender: </td>
	<td><select name="gender">
			<option value="nothing"></option>
			<option value="Male">M</option>
			<option value="Female">F</option>
		</select>
	</td>
</tr>
<tr>
	<td>Press to Continue:</td>
	<td><input type="submit" value="submit" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

Recommended Answers

All 4 Replies

15 years later, tables for layout with an HTML5 doctype... *sigh*

If your form is not functioning correctly, it is probably because of your JavaScript, not because of your outdated HTML markup. Please be more specific when asking questions, and post in the correct forum.

Regards
Arkinder

sorry i'm new to daniweb wasn't sure where the correct place was to post this..
i used a table because it was the easiest way that came to mind, and all the above validates according to html5 spec, and yes i know it's my javascript or at least the way i'm calling it, but i've spent the last three hours checking my code and w3c etc, just can't find the problem. Anyways, i'll just keep on at it :))

No worries, but you should use the label tag and CSS. For example:

<form action="register.php" method="post">
	<fieldset>
	<legend>Registeration</legend>
		<label for="fullname">Your full name:</label>
			<input type="text" name="fullname" class="resetfont"><br>
		<label for="username">Username:</label>
			<input type="text" name="username" class="resetfont"><br>
		<label for="password">Choose a password:</label>
			<input type="password" name="password" class="resetfont"><br>
		<label for="fullname">Repeat password:</label>
			<input type="password" name="repeatpassword" class="resetfont"><br>
		<label for="email">Email:</label>
			<input type="text" name="email" class="resetfont"><br>
		<input type="submit" name="submit" class="resetfont" value="Register">
	</fieldset>
	</form>
* {
			margin: 0;
			padding: 0;
			font-size: 100%;
		}
		form {
			margin: 0.625em;
		}
		fieldset {
			padding: 0.625em;
			background-color: #F2EFE9;
			border: 1px solid #FFF;
			border-top: 1px solid #000;
			border-bottom: 1px solid #000;
		}
		legend {
			font-weight: bold;
		}
		label, input {
			display: block;
		}
		label {
			float: left;
			width: 10em;
		}
		.resetfont {
			font-size: small;
		}

JavaScript is just not my thing. So just re-post your question in the JavaScript section and someone should be able to help you.

Regards
Arkinder

shot for the advice.. will do. appreciate it :))

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.