Javascript form validation not working

Ib311

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;
Gowtham

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

JavaScript Validation Form not working

From Dev

Javascript form validation not working due to typos

From Dev

javascript form validation not working and not showing any alerts

From Dev

Javascript form validation checkbox and radio not working

From Dev

Html-Javascript form Validation not working

From Dev

Javascript form validation not working in bootstrap modal

From Dev

Error message not working in simple javascript form validation

From Dev

Why Javascript validation is not working in html form?

From Dev

jQuery validation not working with that form

From Dev

Form validation with JS not working

From Dev

Jquery: Form validation not working

From Dev

Validation Form is not working

From Dev

Angular form validation is not working

From Dev

Jquery form validation not working?

From Dev

form validation not working as intended

From Dev

Validation not working on form

From Dev

CakePHP Form Validation Not Working

From Dev

jQuery validation on form not working

From Dev

jQuery validation not working with that form

From Dev

form validation not working in angular

From Dev

Jquery form validation not working?

From Dev

Form validation not working in jQuery

From Dev

html form validation not working

From Dev

The Form validation is not working

From Dev

Form validation is not working in angular?

From Dev

Javascript Code For HTML5 Form Validation Not Working

From Dev

Javascript form validation part to check the empty data field is not working

From Dev

Javascript Code For HTML5 Form Validation Not Working

From Dev

Javascript form validation not working with one field but works with the others

Related Related

HotTag

Archive