javascript form validation if statements

Question

I am building a registration form and I found out that the Safari browser doesn't work with the HTML5 'Required' tag. So I built this Javascript script to ensure that users MUST submit data or the form will not submit.

However, if you enter a username and password, but no email address, the form still submits. (The form doesn't submit if you leave out username and/or password).

So the problem seems to be with the email address part of the script. I don't want the form to submit if the email field is blank.

Here is my code:

<script>
function ValidateLoginForm()
{
    var username = document.form1.username;
    var password = document.form1.password;
    var email = document.form1.email;



      if (username.value == "")
    {
        alert("Your username wasn't recognised.");
        username.focus();
        return false;
    }

      if (password.value == "")
    {
        alert("Please enter a password.");
        password.focus();
        return false;
    }
      if (email.value == "")
    {
        alert("Please enter your email address.");
        mypassword.focus();
        return false;
    }
    else{
    return true;
    }
}
</script>

Here is my form (inside a table)

<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<form name="form1" method="post" action="login/process.php" onsubmit="return ValidateLoginForm();">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><center><strong>Registration Form</strong></center></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="username" type="text" id="username" required></td>
</tr>
<tr>
<td>Password*</td>
<td>:</td>
<td><input name="password" type="text" id="password" pattern=".{5,}" title="Minimum length of 5 letters or numbers."  required></td>
</tr>
<tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="email" type="text" id="email" required></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="submit" value="Submit Registration Form"></td>
<p>*Password must consist of numbers and letters.. 5 Characters minimum.</p>
</tr>
</table>
</td>
</form>
</tr>
</table>

Thank you

Michael Berkowski · Accepted Answer · 2012-11-24 14:20:57Z

1

It looks like you are focusing a non-existent item mypassword, which causes your script to terminate in error and the form to submit normally.

if (email.value == "")
{
    alert("Please enter your email address.");
    // Focus the email rather than mypassword (which doesn't exist)
    email.focus();
    return false;
}
// All's well if you got this far, return true
return true;

Here is the working code

It is important to always develop JavaScript with your browser's error console open. You would have seen an error about an undefined object mypassword, which could point you to the faulty line in your code.

edited Nov 24, 2012 at 14:20

answered Nov 24, 2012 at 14:09

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bob Uni Over a year ago

Thanks for the reply Michael. I just tried that but it still submits even with a blank email field. I can't figure out why.

Michael Berkowski Over a year ago

@BobUni I was totally off. Now I think I see the real source of the issue above...

Bob Uni Over a year ago

Thanks Michael. That fixed it :-) I didn't spot that and didn't realize it'd cause my script to terminate and submit. Learn something new everyday! Thanks

Akhil Sekharan · Accepted Answer · 2012-11-24 14:26:10Z

Without the html5 tags, using a common className, It would be

<form name="form1" method="post" action="login/process.php" onsubmit="return ValidateLoginForm();">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td colspan="3"><center><strong>Registration Form</strong></center></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input class="inputElement" type="text" name="username" id="username" ></td>
</tr>
<tr>
<td>Password*</td>
<td>:</td>
<td><input class="inputElement" type="text" name="password" id="password" pattern=".{5,}" title="Minimum length of 5 letters or numbers."  ></td>
</tr>
<tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input class="inputElement" type="text" name="email" id="email" ></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="submit"  value="Submit Registration Form"></td>
<p>*Password must consist of numbers and letters.. 5 Characters minimum.</p>
</tr>
</table>
</td>
</form>


<script type="text/javascript">

function ValidateLoginForm()
{
    var inputElements = document.getElementsByClassName('inputElement');;
    for(var i=0;i<inputElements.length;i++){
        if(!inputElements[i].value){
            alert(inputElements[i].name +' cannot be empty');
            return false;
        }
    }
    return true;
}
</script>

Collectives™ on Stack Overflow

javascript form validation if statements

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related