PDA

View Full Version : Javascript Validation



keyboard
06-02-2012, 04:23 AM
This is my validation 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



<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 $().



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


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



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


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


<!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?


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