I'm learning more about PHP/Javascript, trying to set up a basic website. I've got the full thing up and running, but there is no validation on registration and whatnot. I'm trying to use Javascript to validate the form before submitting it, but it's not working for me. Here is my page:
<script language="JavaScript" type="text/javascript">
OK = false;
function validateEmail() {
var x = document.forms["form1"]["myemail"].value;
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");
return false;
}
}
function notShortUsername() {
var x = document.forms["form1"]["myusername"].value;
if(x.value.length < 6) {
// set the focus to this input
OK = false;
}
OK = true;
}
function notShortPassword() {
var x = document.forms["form1"]["mypassword"].value;
if(x.value.length < 6) {
alert(helperMsg);
elem.focus();
// set the focus to this input
OK = false;
}
OK = true;
}
function validate () {
notShortUsername();
notShortPassword();
validateEmail();
if(OK) {
form.submit();
return true;
} else {
//do something else
alert("You did it wrong!");
return false;
}
}
</script>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="registervalidation.php" onsubmit="return validate">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294">
<input name="myusername" type="text" id="myusername" />
</td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td>
<input name="mypassword" type="password" id="mypassword" />
</td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td>
<input name="myemail" type="text" id="myemail">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<input type="submit" name="Submit" value="Complete Registration">
<input type="submit" name="Submit" value="Cancel">
</td>
</tr>
</table>
</td>
</form>
</tr>
</table>
I've also tried using this: http://docs.jquery.com/Plugins/Validation
The issue with it is it won't validate when the item loses focus, and still submits the php anyways.
onsubmit="return validate();"
Do not forget the ();
change this:
var x = document.forms["form1"]["myusername"].value;
if(x.value.length < 6) {
to:
var x = document.forms["form1"]["myusername"].value;
if(x.length < 6) {
and this:
var x = document.forms["form1"]["mypassword"].value;
if(x.value.length < 6) {
to:
var x = document.forms["form1"]["mypassword"].value;
if(x.length < 6) {
In each case, var x
already contains the value so you get the length directly by x.length
Test your validate function outside the form submit:
<a href="#" onclick="validate();">test</a>
You'll see an error in the console letting you know x isn't defined.
Uncaught TypeError: Cannot read property 'length' of undefined
So the script stops executing and never returns false, which allows the form to post.