PDA

View Full Version : Javascript not working in HTML Web Form.

icedesign
03-19-2009, 01:01 PM
Hi,
I am pretty new to coding (besides basic html), but I decided to start a new project in order to learn a little. I figured I would start with the basics Touching on PHP and Mysql. Anyways to get to the point.

Upon learning how to create databases and insert records in to a database via PHP. I decided to start working on a Form to create "users".

I am trying to accomplish the following:

-Username Field Limited to 14 chars (works)
-Password field w/ a verify password field that makes sure both passwords match (not working)
-Email field (works)
-Limit the use of any special characters (except @, for the email field) (not working)

I am trying to do this via java-script. But the javascript is not working.
I am not sure why. Could anyone help me a little? here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>create user</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT type="text/javascript">
//Limit special character input
function valid(f) {
!(/^[A-z@0-9]*$/i).test(f.value)?f.value = f.value.replace(/[^A-z@0-9]/ig,''):null;
}

//Password verification
function checkPw(form) {
var password = form.elements['password'];
var pwveri = form.elements['pwveri'];
var minPasswordLength = 6;

// Check password length
if ((minPasswordLength > password.value.length)
|| (minPasswordLength > pwveri.value.length)) {
window.alert(
'Passwords must be at least ' + minPasswordLength
+ ' characters long.');
pw1.focus();
return false;
}
// Check password match
if (password.value != pwveri.value) {
window.alert(
'The passwords do not match. Please re-enter.');
password.value = '';
pwveri.value = '';
password.focus();
return false;
}
</script>
</head>

<body>
<form action="insert.php" method="post" onsubmit="return checkPw(this)" name="userform">
Username: <br><input type="text" name="username" size="14" autocomplete="off" MAXLENGTH="14"/>
<br>
Password (6-14 Characters): <br><input type="password" name="password" size "14" autocomplete="off" MAXLENGTH="14"/>
<br>
Password (Again): <br><input type="password" name="pwveri" size "14" autocomplete="off" MAXLENGTH="14"/>
<br>
E-mail address: <br><input type="text" name="email" size "30" autocomplete="off" MAXLENGTH="30"/>
<br>
<br>
<input type="Submit" value="Create User" />
</form>
</body>
</html>
Clueful
03-19-2009, 10:44 PM
The code as presented has a missing closing brace, and won't work at all.

pw1 doesn't exist so you cant call its focus method.

Your valid function (if used) needs to return a value.
rangana
03-20-2009, 01:11 AM
Might help:

<script type="text/javascript">
window.addEventListener?window.addEventListener('load',charLimit,false):
window.attachEvent('onload',charLimit); // FF : IE

function charLimit() {
var email = document.userform.email;
email.onkeypress = function () {
email.value = email.value.match(/[^a-z@\.\d]/gi)?email.value.replace(/[^a-z@\.\d]/gi,''):email.value;
}
}

//Password verification
function checkPw(form) {
var password = form.elements['password'];
var pwveri = form.elements['pwveri'];
var minPasswordLength = 6;

// Check password length
if (minPasswordLength > password.value.length) {
alert('Passwords must be at least ' + minPasswordLength+ ' characters long.');
password.focus(); // This part was changed. Originally it was pw1.
return false;
}
if (minPasswordLength > pwveri.value.length) {
alert('Passwords must be at least ' + minPasswordLength+ ' characters long.');
pwveri.focus();
return false;
}
// Check password match
if (password.value != pwveri.value) {
alert('The passwords do not match. Please re-enter.');
password.value = '';
pwveri.value = '';
password.focus();
return false;
}
}
</script>