Javascript Validation

**keyboard** · 06-02-2012, 04:23 AM

This is my validation code.

Code:

<script type="text/javascript">
function validate() {
var username = $('username');
var password = $('password');
var email = $('email');
$('error1').innerHTML = "";
$('error2').innerHTML = "";
$('error3').innerHTML = "";
check = "true";
if(username.value.length == "0") {
$('error1').innerHTML = "Please enter a username <br />";
check = "false";
}
if(password.value.length == "0") {
$('error2').innerHTML = "Please enter a password <br />";
check = "false";
}
if(email.value.length == "0") {
$('error3').innerHTML = "Please enter your email <br />";
check = "false";
} else {
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(!email.value.match(emailExp)){
$('error3').innerHTML = "Please enter a valid email<br />";
check = "false";
}
}
if(check == "false") {
return false;
} else {
return true;
}
}
</script>

This's my form

Code:

<div id="error1" class="error"></div>
<div id="error2" class="error"></div>
<div id="error3" class="error"></div>
<br />
<span style="font-size:5;margin-left:100px;">
<strong>
Register
</strong>
</span>
<br />
<br />
<form action="Process/" method="post" onsubmit="return validate()">
<label for="username">Username:</label> <input type="text" name="username" class="formStyle" id="username" maxlength="10" value=""><br /><br />
<label for="password">Password:</label> <input type="text" name="password" class="formStyle" id="password" maxlength="10" value=""><br /><br />
<label for="email">Email:</label> <input type="text" name="email" class="formStyle" id="email"><br /><br />
<input type="submit" name="submit1" class="submit" value="Submit">
</form>

This's the function $().

Code:

function $(element) {
        return document.getElementById(element);
}

Only the email field validates, but when I change these lines

Code:

var username = $('username1');
var password = $('password1');
<label for="username">Username:</label> <input type="text" name="username" class="formStyle" id="username1" maxlength="10" value=""><br /><br />
<label for="password">Password:</label> <input type="text" name="password" class="formStyle" id="password1" maxlength="10" value=""><br /><br />

It works fine. If I add in these alerts

Code:

alert(username.value);
alert(password.value);

It alerts "Username" and "Password" (the values of each of the fields) but when submiting the form, I left all the fields blank...

Can anyone work out why it is assigning values to the fields, even though I left them empty?

Keyboard1333

**vwphillips** · 06-02-2012, 03:09 PM

this works for me

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">

function validate(frm) {
 var username = frm['username'],password = frm['password'],email = frm['email'],check = true;
 $('error1').innerHTML = "";
 $('error2').innerHTML = "";
 $('error3').innerHTML = "";
 if(username.value.replace(/\s/g,'').length<1) {
  $('error1').innerHTML = "Please enter a username <br />";
  check = false;
 }
 if(password.value.replace(/\s/g,'').length<1) {
  $('error2').innerHTML = "Please enter a password <br />";
  check = false;
 }
 if(email.value.replace(/\s/g,'').length<1) {
  $('error3').innerHTML = "Please enter your email <br />";
  check = false;
 }
 else {
  var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  if(!email.value.match(emailExp)){
   $('error3').innerHTML = "Please enter a valid email<br />";
   check = false;
  }
 }
 if(!check) {
  return false;
 }
 else {
  return true;
 }
}

function $(element) {
 return document.getElementById(element);
}

</script>
</head>

<body>
<div id="error1" class="error"></div>
<div id="error2" class="error"></div>
<div id="error3" class="error"></div>
<br />
<span style="font-size:5;margin-left:100px;">
<strong>
Register
</strong>
</span>
<br />
<br />
<form action="Process/" method="post" onsubmit="return validate(this)">
<label for="username">Username:</label> <input type="text" name="username" class="formStyle" id="username" maxlength="10" value=""><br /><br />
<label for="password">Password:</label> <input type="password" name="password" class="formStyle" id="password" maxlength="10" value=""><br /><br />
<label for="email">Email:</label> <input type="text" name="email" class="formStyle" id="email"><br /><br />
<input type="submit" name="submit1" class="submit" value="Submit">
</form>
</body>

</html>

**keyboard** · 06-02-2012, 10:18 PM

Thanks!
If I can't get my script to work, I'll use that, but if possible, I'd still like someone to point out the problem with mine.

P.s. There are no Javascript errors with my script in IE9 (developer tools)

EDIT -
One more thing, what's this line do?

Code:

 if(email.value.replace(/\s/g,'').length<1) {

**vwphillips** · 06-03-2012, 08:08 AM

removes spaces so the form will not submit if there is only a space in the field

Thread: Javascript Validation

Thread Tools

Search Thread

Javascript Validation

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions