stackoom
  简体   繁体   中英

Basic HTML-Javascript based form validation

 原文  2018-02-14 23:15:31  4   2    javascript/ html/ html5/ function/ 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?

2 answers

solution1
 1  2018-02-14 23:21:24

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, ie: 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>

solution2
 0  2018-02-14 23:49:24

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/jquery-validation@1.17.0/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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question HTML-Javascript validation Html-Javascript form Validation not working Validating html-javascript Basic Form Validation with JavaScript/HTML Special dot masked input HTML-JavaScript HTML-Javascript : Use Switchcase to load picture Self modifying html-JavaScript file html-javascript append non effective basic JavaScript form validation Basic form validation with Javascript
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM