CODEWITHSUNDEEP
javascripthtmlforms
Gautham Pughazhendhi
Gautham Pughazhendhi

Reputation: 342

The HTML form submits even if the input element is empty

I have a HTML form and I use JavaScript to check for empty fields to stop form submission but the form submits to the URL in action attribute even if any one or all fields are empty.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <script type="text/javascript">
        function validate() {


        var fname = document.forms["form1"]["fname"].value;
        var lname = document.forms["form1"]["lname"].value;
        var ID = document.forms["form1"]["ID"].value;
        var Password = document.forms["form1"]["Password"].value;

        if(fname == null || lname == null || ID == null || Password == null)
        {
            alert("Please enter all the fields");
            return false;
        };

    }
    </script>

</head>
<body style = "font-family: Lato">

    <div style="padding-left: 10%">
    <h1>Welcome to my site</h1><br>
    </div>
    <div style="text-align: center">
       <form  name="form1" onsubmit="return validate()" method = "post" id="form1"  action = "http://127.0.0.1:2906/success" style="padding-top: 2%">
           <label id="user" style="font-size: 20px">Username</label><br>
           <input type="text" name = "ID" placeholder = "Username" style = "padding-left: 0.2%;"><br><br>
           <label style="font-size: 20px">First name</label><br>
           <input type="text" name = "fname" id="fname" placeholder = "First name" style = "padding-left: 0.2%"><br><br>
           <label style="font-size: 20px">Last name</label><br>
           <input type="text" name = "lname" placeholder = "Last name" style = "padding-left: 0.2%"><br><br>
           <label style="font-size: 20px">Password</label><br>
           <input type = "password" name = "Password" placeholder = "Password" style = "padding-left: 0.2%"><br><br><br>
           <input type = "submit"  value = "Sign up" style="width:10%;height: 40px">
        </form>
    </div>

</body>
</html>

Upvotes: 0

Views: 94

Answers (3)

Anoop Butola
Anoop Butola

Reputation: 50

Yes just simply check for empty string. Eg.

if($("#elementId").val()==""){
    alert(" please fill username");
    return false;
}

Upvotes: 0

Akhter Al Amin
Akhter Al Amin

Reputation: 962

Try this:

<script type="text/javascript">
        function validate() {


        var fname = document.forms["form1"]["fname"].value;
        var lname = document.forms["form1"]["lname"].value;
        var ID = document.forms["form1"]["ID"].value;
        var Password = document.forms["form1"]["Password"].value;

        if(!fname || !lname || !ID || !Password || fname!='' || lname!='' || ID!='' || Password!='')
        {
            alert("Please enter all the fields");
            return false;
        };
    }

Upvotes: 0

gyre
gyre

Reputation: 16777

Your problem is that input.value always returns a string. When a field is not filled out, its value will be the empty string '', which is not loosely equal to null. Try using !value instead, which will work with the empty string.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sign Up</title>
    <script type="text/javascript">
        function validate() {


        var fname = document.forms["form1"]["fname"].value;
        var lname = document.forms["form1"]["lname"].value;
        var ID = document.forms["form1"]["ID"].value;
        var Password = document.forms["form1"]["Password"].value;

        if(!fname || !lname || !ID || !Password)
        {
            alert("Please enter all the fields");
            return false;
        };

    }
    </script>

</head>
<body style = "font-family: Lato">

    <div style="padding-left: 10%">
    <h1>Welcome to my site</h1><br>
    </div>
    <div style="text-align: center">
    <form  name="form1" onsubmit="return validate()" method = "post" id="form1"  action = "http://127.0.0.1:2906/success" style="padding-top: 2%">
        <label id="user" style="font-size: 20px">Username</label><br>
        <input type="text" name = "ID" placeholder = "Username" style = "padding-left: 0.2%;"><br><br>
        <label style="font-size: 20px">First name</label><br>
        <input type="text" name = "fname" id="fname" placeholder = "First name" style = "padding-left: 0.2%"><br><br>
        <label style="font-size: 20px">Last name</label><br>
        <input type="text" name = "lname" placeholder = "Last name" style = "padding-left: 0.2%"><br><br>
        <label style="font-size: 20px">Password</label><br>
        <input type = "password" name = "Password" placeholder = "Password" style = "padding-left: 0.2%"><br><br><br>
        <input type = "submit"  value = "Sign up" style="width:10%;height: 40px">
    </form>
    </div>

</body>
</html>

Upvotes: 1

Related Questions