Basic HTML-Javascript based form validation

Question

I am very new to js and html, could someone help me understand as to why my page is getting redirected to the next page even if the validation fails and my "validate()" function returns only FALSE!

I have created a form that takes name, age, email, state etc as input and it should ideally validate them and then proceed towards the next page.

Here is the code :

<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(){
    var name=document.getElementById('name_id').value;
    var email=document.getElementById('email_id').value;
    var age=document.getElementById('age_id').value;
    var state=document.getElementById('state_id').value;
    var address=document.getElementById('address_id').value;

    //checking conditions for name
    if (name_length<10)
    {
        return false;
    }
    if(!(/\w \w/.test(name2)))
    {
        alert("Please enter name correctly!");
        return false;
    }
    if(/\d/.test(name2))
    {
        alert("Name cannot contain digits");
        return false;
    }

    //checking conditions for email
    var index_of_at = name.indexOf('@');
    if(index_of_at == -1)
    {
        alert("Please enter a valid email address");
        return false;
    }
    else
    {
            var befor_at = email.substring(0,index_of_at);
            var after_at =email.substring(index_of_at+1,email.length);
            if(!(/[!-$?]/.test(before_at)))
            {
                if((/(\w|\d|.)/).test(before_at))
                    continue;
                else
                {
                alert("Please enter a valid email address");
                return false;
            }
        }
        else
        {
            alert("Please enter a valid email address");
            return false;
        }


} 

//checking conditions for age
if(/\w/.test(age))
{
    alert("Please enter a valid Age");
    return false;
}
else
{
    if(age>100 || age<0)
    {
        alert("Please enter age btetween 0 and 100");
        return false;
    }
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html"     method="post" onsubmit="return validate();">
  Name:<br>
  <input type="text" name="name" id="name_id"><br>
  Email:<br>
  <input type="text" name="email" id="email_id"><br>
  Age:<br>
  <input type="text" name="age" id="age_id"><br>
  State:<br>
  <input type="text" name="state" id="state_id"><br>
  Address:<br>
  <input type="text" name="address" id="address_id"><br>
  Photo: <br>
  <input type="img" name="display-picture" id=photo_id>  
  <br> <br> <br>
  <input type="submit" value ="Submit">
</form>
</body>
</html>

Could somebody please help me with why my code redirects directly to handle.html without checking for validations?

ANY syntax error in your JavaScript will cause the form to submit. The first error is 'if (name_length<10)' because name_length is not defined. Since you are learning then also learn how to use the browser dev tools especially console and source. Also learn breakpoints and single stepping through your code. — user2417483
– user2417483, Commented Feb 14, 2018 at 23:37
Thanks @jeff . Learnt about console. Makes things so easier. — Karan Asthana
– Karan Asthana, Commented Feb 15, 2018 at 19:54

Ele · Accepted Answer · 2018-02-14 23:29:44Z

You're trying to get the length of name as follow: name_length this is a typo, however, you have another error: a continue keyword

if((/(\w|\d|.)/).test(before_at))
    continue;
    ^
else

Changed to:

if((/(\w|\d|.)/).test(before_at)) {
    //continue; You need to modify this part.
} else {
    alert("Please enter a valid email address");
    return false;
}

You need to understand that continue keyword must be placed within a loop, i.e: for-loop.

<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript">
function validate(e){

    var name=document.getElementById('name_id').value;
    var email=document.getElementById('email_id').value;
    var age=document.getElementById('age_id').value;
    var state=document.getElementById('state_id').value;
    var address=document.getElementById('address_id').value;

    //checking conditions for name
    if (name.length<10)
    {
      alert('Please enter name correctly!');
        return false;
    }
    if(!(/\w \w/.test(name2)))
    {
        alert("Please enter name correctly!");
        return false;
    }
    if(/\d/.test(name2))
    {
        alert("Name cannot contain digits");
        return false;
    }

    //checking conditions for email
    var index_of_at = name.indexOf('@');
    if(index_of_at == -1)
    {
        alert("Please enter a valid email address");
        return false;
    }
    else
    {
            var befor_at = email.substring(0,index_of_at);
            var after_at =email.substring(index_of_at+1,email.length);
            if(!(/[!-$?]/.test(before_at)))
            {
                if((/(\w|\d|.)/).test(before_at)) {
                    //continue;
                } else
                {
                alert("Please enter a valid email address");
                return false;
            }
        }
        else
        {
            alert("Please enter a valid email address");
            return false;
        }


} 

//checking conditions for age
if(/\w/.test(age))
{
    alert("Please enter a valid Age");
    return false;
}
else
{
    if(age>100 || age<0)
    {
        alert("Please enter age btetween 0 and 100");
        return false;
    }
}
return false;
}
</script>
</head>
<body>
<h1 style = "text-align : center;"> Enter Details </h1>
<form action = "C:\Users\hp\Documents\Orgzit Project\handle.html"     method="post" onsubmit="return validate(event);">
  Name:<br>
  <input type="text" name="name" id="name_id"><br>
  Email:<br>
  <input type="text" name="email" id="email_id"><br>
  Age:<br>
  <input type="text" name="age" id="age_id"><br>
  State:<br>
  <input type="text" name="state" id="state_id"><br>
  Address:<br>
  <input type="text" name="address" id="address_id"><br>
  Photo: <br>
  <input type="img" name="display-picture" id=photo_id>  
  <br> <br> <br>
  <input type="submit" value ="Submit">
</form>
</body>
</html>

This still throws errors for me, an only seems to check the name input.

Akansh Braj · Accepted Answer · 2018-02-14 23:49:24Z

0

If you want to start learning web development with html and javascript, i suggest learn shortest way to do it. For javascript validation check this jquery validation

<!DOCTYPE html>
<html>
<head>
<title> My first web app </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
</head>
<body>
 <h1 style = "text-align : center;"> Enter Details </h1>
 <form action = "C:\Users\hp\Documents\Orgzit Project\handle.html" name="userForm" id="userForm" method="post">
 Name:<br>
 <input type="text" name="name" id="name_id"><br>
 Email:<br>
 <input type="text" name="email" id="email_id"><br>
 Age:<br>
 <input type="text" name="age" id="age_id"><br>
 State:<br>
 <input type="text" name="state" id="state_id"><br>
 Address:<br>
 <input type="text" name="address" id="address_id"><br>
 Photo: <br>
 <input type="img" name="display-picture" id=photo_id>  
 <br> <br> <br>
 <input type="submit" value ="Submit">
 </form>
<script type="text/javascript">
$('#userForm').validate({
    rules: {
        name :{
            required : true
        },
        email: {
            required : true,
            email : true,
        },
        age: {
            required: true,
            minlength:18, // Can define minimum age  
            maxlength:60  // max page
        }
    },
    submitHandler: function(form) {
        alert("All Well") ; 
        $("#userForm").submit(); // form tag id to sumit the form
        return false ;
    }
});
</script>
</body>
</html>

With jquery validation you can lots too much work with very short hand code.

Hope this will help, All the best.

answered Feb 14, 2018 at 23:49

Akansh Braj

945 bronze badges

2 Comments

Karan Asthana Over a year ago

Thanks Akansh. Could you please explain me as to what does the $('#userForm') do? And how exactly does it link the form to the function in the script?

Akansh Braj Over a year ago

Sure, $("#userForm") select your form as an DOM object for jquery so that you can perform the validation, action, event .. etc...

Collectives™ on Stack Overflow

Basic HTML-Javascript based form validation

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related