Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Checking PHP-form

11:44 am on Jun 2, 2009 (gmt 0)

New User

5+ Year Member

joined:Mar 19, 2009
posts: 37
votes: 0


I have a JavaScript code that is supposed to check a PHP-form, but it doesn't actually do anything. Can anybody help?

The PHP-form looks like this;
<form id='upload' action='gallery.php' method='post'>
<div class='box'><input type='text' name='us_mail' class='upload' maxlength='60' value='Email' /><br /></div>
<div class='box'><input type='password' name='us_pass' class='upload' maxlength='32' value='Password' /><br /></div>
<input type='hidden' name='submitted' value='TRUE'/>
<button class='btn' type='submit'>Login</button>

And the JavaScript looks like this;
window.onload = function() {
var clicker = document.getElementByTagName("btn");

// Form object
var f = document.getElementById('upload');
// Boolean to track if error found
var foundErr ="";
// Form element index number which the first error occured.
var focusOn ="";

function check_form() {
foundErr = false; focusOn = -1;
// Username field must be filled out.
if (f.us_mail.value.length == 0) {
alert ("Username too short.");
foundErr = true; focusOn = 0;

// Password field must be filled out.
if (f.us_pass.value.length == 0) {
alert("Password too short");
foundErr = true;
if (focusOn==-1) focusOn=1;

//Has any error occured?
if (foundErr) {
//Yes. Focus on which the first occurred.
} else {
// No. Submit the form.

Any help is wonderful!

1:34 pm on June 2, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
votes: 0


change onClick to all lowercase, ie onclick

1:41 pm on June 2, 2009 (gmt 0)

New User

5+ Year Member

joined:Mar 19, 2009
votes: 0

Thanks - I tried changing that, but now Firebug says that f is null? :/
2:19 pm on June 2, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

There's a couple things making your approach a little convoluted . . . you have inline global variables that aren't needed . . . it can be a little easier. Also you should attach your onSubmit event to the form not the button, so if someone presses enter instead of the button, it will still work; additionally, use input type="submit" so if JS is disabled the form will still submit.

Try this. Note the ID's added to the form, and the return false to insure the Javascript handles the submit and doesn't submit via a normal form submission.

Also changed the single quotes to doubles for validation, I know why you did this via PHP but should turn to the concatenation operator to output valid code.

If you're going to use value.length, you should probably also test against a specific length. If you just want to see if it's blank, test against value==''.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line
See no reason for XHTML doctype here, do as ye wish
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
window.onload = function() { attachBehaviors(); };
function attachBehaviors () {
// Attache the behavior to the form
if (document.getElementById('upload')) {
document.getElementById('upload').onsubmit=function() {
return check_form(this);
function check_form(form) {
var els = Array ('us_mail','us_pass');
var descs = Array ('Username','Password');
var lens = Array (5,6);
var msg = '';
var focusObj;
for (i=0;i<els.length;i++) {
if (document.getElementById(els[i])) {
if (document.getElementById(els[i]).value.length < lens[i]) {
msg = descs[i] + ' too short.';
if (msg != '') {
else { form.submit(); }
return false;
<form id="upload" action="gallery.php" method="post">
<p class="box"><input type="text" name="us_mail"
id="us_mail" class="upload" maxlength="60" value="Email"></p>
<p class="box"><input type="password" name="us_pass"
id="us_pass" class="upload" maxlength="32" value="Password"></p>
<input type="hidden" name="submitted" value="TRUE">
<input type="submit" class="btn" value="Login">


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members