CODEWITHSUNDEEP
javascriptvalidation
Conor606
Conor606

Reputation: 107

Form validation not working

I have a simple log in and I cannot get the validation to work at all. I was wondering if someone could help.

HTML: 

<div class="login">
        <h2>Sign In</h2>

        <form id="frmLogin" method="post">

            Username: <input id="txtUsername" name="txtUsername" type="text" /><br/>
            Password: <input name="txtPassword" type="password" /> <br/>
            <button onClick="validateLogin()">Log In</button>
        </form>
    </div><!-- End of Login Section -->

Javascript:

<script>
function validateLogin()
{
    var userName = document.getElementsByID('txtUsername').value;

    var invalidForm = 0;

    if(userName == "")
    {
        alert("Username cannot be blank!");
        invalidForm = 1;                
    }//end if

    if(invalidForm == 0)
    {
        alert("Form validated, no errors");
    }//end if 

}
</script>

At the moment I'm just testing for an empty username, once I can get this working I'll continue on with the rest. Thank you!

Upvotes: 1

Views: 41

Answers (2)

KAD
KAD

Reputation: 11112

To get and element by ID the function name is getElementById and not getElementsByID, besides, javascript is case sensitive so getElementByID does not work.

function validateLogin()
{
    var userName = document.getElementById('txtUsername').value;

    var invalidForm = 0;

    if(userName == "")
    {
        alert("Username cannot be blank!");
        invalidForm = 1;                
    }//end if

    if(invalidForm == 0)
    {
        alert("Form validated, no errors");
    }//end if 

}

Upvotes: 5

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

Do your jquery code something like these :-

<script>
function validateLogin()
{
    var userName = document.getElementById('txtUsername').value;

    var invalidForm = 0;
    var errMessage = ""

    if(userName === "")
    {
        errMessage = "Username cannot be blank!";
        invalidForm = 1;                
    }//end if

    if(invalidForm == 0)
    {
        alert("Form validated, no errors");
    }
    else if (invalidForm == 1)
    {
       alert(errMessage);
       return false;
    }
}
</script>

It may help you.

Upvotes: 0

Related Questions