CODEWITHSUNDEEP
javascripthtmlformsvalidation
Bob Uni
Bob Uni

Reputation: 2681

javascript form validation if statements

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

Upvotes: 2

Views: 19429

Answers (2)

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

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>

Upvotes: 0

Michael Berkowski
Michael Berkowski

Reputation: 270609

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.

Upvotes: 1

Related Questions