Javascript form validation not working

Question

I was wondering why my form validation was not working if anyone could help fix. I need it to validate the input in the forms but it does not work and just submits. I understand the majority of logic but have no idea why it is not working

<form id="regform" method="post" action="register.php">
                <p>Areas marked with a (*) are required by the form!</p>
        <fieldset>
            <legend>Account Information</legend>
            <div class="textinput">
                <label for="username">User Name *</label>
                <input id="username" type="text" name="id" />
            </div>
            <div class="textinput">
                <label for="email">Email *</label>
                <input id="email" type="text" name="id" />
            </div>
            <div class="textinput">
                <label for="pwd1">Password *</label>
                <input id="pwd1" type="password" name="pwd1" />
                <span id="pwdHelpBtn" class="button" >Password Rule</span>
                <div id="pwdHelpWin" class="window" >
                    <p>Password must satisfy the following:</p>
                    <ul>
                        <li>Must be 8 characters long</li>
                        <li>Must contain atleast 1 number</li>
                        <li>Must contain atleast 1 upper & lower case letter</li>
                    </ul>
                    <span id="pwdHelpClose" class="button" >Close</span>
                </div>
            </div>
            <div class="textinput">
                <label for="pwd2">Retype Password *</label>
                <input id="pwd2" type="password" name="pwd2" />
            </div>
        </fieldset>
        <fieldset>
            <legend>User Information</legend>
            <div class="textinput">
                <label for="name">Name *</label>
                <input id="name" type="text" name="name" />
            </div>
            <div class="radioinput">
                <fieldset>
                    <legend>Gender *</legend>
                    <input id="genderm" type="radio" name="gender" value="M" />
                    <label for="genderm">Male</label>
                    <input id="genderf" type="radio" name="gender" value="F" />
                    <label for="genderf">Female</label>     
                </fieldset>
            </div>
        </fieldset> 
        <p>
            <input id="signup" type="submit" value="Submit"/>
        </p>
    </form>


function validate()
{   
    var pwd1 = document.getElementById("pwd1").value;
    var pwd2 = document.getElementById("pwd2").value;
    var username = document.getElementById("username").value;
    var genderm = document.getElementById("genderm").checked;
    var genderf = document.getElementById("genderf").checked;
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;

    var errmsg = "";
    var result = true;
    var pattern = /^[a-zA-z ]+$/;

    var pwd1length = pwd1.length;

    if(email == "")
    {
        errmsg += "Email cannot be empty\n";
    }
    else
    {
        if(!email.match("@"))
        {
            errmsg += "Please enter email address\n";
        }
    }
    if(pwd1 == "")
    {
        errmsg += "Please Enter a Password\n";
    }
    else
    {
        if(pwd1length < 6)
            errmsg += "Password must be atleast 6 characters long\n";
    }

    if(pwd2 == "")
    {
        errmsg += "Please Re-enter a Password\n";
    }
    else
    {
        if(pwd2 != pwd1)
        {
            errmsg += "Password does not match\n";
        }
    }
    if(username == "")
    {
        errmsg += "Please enter a User Name\n";
    }
    else
    {
        if(!username.match (pattern))
        {
            errmsg += "User Name Contains Symbols\n";
        }
    }
    if(!(genderm || genderf))
    {
        errmsg += "Please Select Gender\n";     
    }
        if(name != "")
    {
        errmsg += "Please enter a name\n"
    }
    if(errmsg != "")
    {   
        alert (errmsg);
        result = false;
    }
    return result;
}
function init()
{
    name = document.getElementById("name");
    email = document.getElementById("email");
    pwd1 = document.getElementById("pwd1");
    pwd2 = document.getElementById("pwd2");
    username = document.getElementById("username");

    var regForm = document.getElementById("regform");

    regForm.onsubmit = validate;

}

window.onload = init;

Answer 1

I have found the issue, You have to replace the following code if(name != "") to

 if(name == "")
    {
        errmsg += "Please enter a name\n"
    }

 function validate() { var pwd1 = document.getElementById("pwd1").value; var pwd2 = document.getElementById("pwd2").value; var username = document.getElementById("username").value; var genderm = document.getElementById("genderm").checked; var genderf = document.getElementById("genderf").checked; var name = document.getElementById("name").value; var email = document.getElementById("email").value; var errmsg = ""; var result = true; var pattern = /^[a-zA-z ]+$/; var pwd1length = pwd1.length; if(email == "") { errmsg += "Email cannot be empty\\n"; } else { if(!email.match("@")) { errmsg += "Please enter email address\\n"; } } if(pwd1 == "") { errmsg += "Please Enter a Password\\n"; } else { if(pwd1length < 6) errmsg += "Password must be atleast 6 characters long\\n"; } if(pwd2 == "") { errmsg += "Please Re-enter a Password\\n"; } else { if(pwd2 != pwd1) { errmsg += "Password does not match\\n"; } } if(username == "") { errmsg += "Please enter a User Name\\n"; } else { if(!username.match (pattern)) { errmsg += "User Name Contains Symbols\\n"; } } if(!(genderm || genderf)) { errmsg += "Please Select Gender\\n"; } if(name == "") { errmsg += "Please enter a name\\n" } if(errmsg != "") { alert (errmsg); result = false; } alert("SUCCESS"); return result; } function init() { name = document.getElementById("name"); email = document.getElementById("email"); pwd1 = document.getElementById("pwd1"); pwd2 = document.getElementById("pwd2"); username = document.getElementById("username"); var regForm = document.getElementById("regform"); regForm.onsubmit = validate; } window.onload = init;

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <form id="regform" method="post" action="register.php"> <p>Areas marked with a (*) are required by the form!</p> <fieldset> <legend>Account Information</legend> <div class="textinput"> <label for="username">User Name *</label> <input id="username" type="text" name="id" />Username must be a alphabet </div> <div class="textinput"> <label for="email">Email *</label> <input id="email" type="text" name="id" /> </div> <div class="textinput"> <label for="pwd1">Password *</label> <input id="pwd1" type="password" name="pwd1" /> <span id="pwdHelpBtn" class="button" >Password Rule</span> <div id="pwdHelpWin" class="window" > <p>Password must satisfy the following:</p> <ul> <li>Must be 8 characters long</li> <li>Must contain atleast 1 number</li> <li>Must contain atleast 1 upper & lower case letter</li> </ul> <span id="pwdHelpClose" class="button" >Close</span> </div> </div> <div class="textinput"> <label for="pwd2">Retype Password *</label> <input id="pwd2" type="password" name="pwd2" /> </div> </fieldset> <fieldset> <legend>User Information</legend> <div class="textinput"> <label for="name">Name *</label> <input id="name" type="text" name="name" /> </div> <div class="radioinput"> <fieldset> <legend>Gender *</legend> <input id="genderm" type="radio" name="gender" value="M" /> <label for="genderm">Male</label> <input id="genderf" type="radio" name="gender" value="F" /> <label for="genderf">Female</label> </fieldset> </div> </fieldset> <p> <input id="signup" type="submit" value="Submit"/> </p> </form> </body> </html>