CODEWITHSUNDEEP
javascriptformsvalidation
user4138475
user4138475

Reputation: 109

My input is not proceeding to the next page

I have created a form where the user will enter some information and the email will have to be validated before the user can proceed to the next page (thankyou.html) however when i input every thing correctly into the form the email gets validated but i cannot get to the next page...i cant figure out what im doing wrong. Any help would be appreciated and thank you in advance.

<script type = "text/javascript">

    function validate()
        {
            var text = document.getElementById("text1").value;
            var regx = /^([a-zA-Z0-9\.-]+)@([a-zA-Z0-9-]+)\.([a-z]{3})$/;
            var uname = document.getElementById("name");
            var title = document.getElementById("title1");
            var comment = document.getElementById("cmt");


        if(regx.test(text))
            {
            document.getElementById("lbltext").innerHTML="you may proceed";
            document.getElementById("lbltext").style.visibility="visible";  
            document.getElementById("lbltext").style.color="green";
            }
        else{
            document.getElementById("lbltext").innerHTML="invalid email";
            document.getElementById("lbltext").style.visibility="visible";
            document.getElementById("lbltext").style.color="black";
            }

        }

</script>
</head>

<body>
<form onsubmit = "return validate()" action = "thankyou.html" class = "input"><br><br>
    <p style = "text-decoration: underline; color: white;">comment :</p><br>
    <input id= "name" placeholder= "Name" type= "text" style = "height: 25px; width:250px;"/><br><br>
    <input id = "text1" placeholder = "Email" type= "text" style = "height: 25px; width: 250px;"/><p style = "font-size: 25px; color: red; display: inline-block;">*</p><label id= "lbltext" style = "color: black;visibility: hidden"></label><br><br>
    <input id= "title1" placeholder= "title" type= "text" style = "height: 25px; width: 500px;"/><br><br>
    <textarea id= "cmt" placeholder= "Comment" type= "text" style = "height: 250px; width: 500px;"></textarea><br><br>
    <button onClick="validate()" type="button" style = "color: white; font-weight: bold; background-color:  #9933ff; width: 75px; height: 30px;float: right; margin-right: 90px; border:thick; border-color: black;">Submit</button>
    </form>
</body>

Upvotes: 0

Views: 39

Answers (2)

Steven Kapaun
Steven Kapaun

Reputation: 247

Also it looks like you're just going to the tankyou.html immediately after validation. It seems to me like you don't need the green 'you may proceed'. You could clean up your code a little.

    if(regx.test(text) === false)
    {
        document.getElementById("lbltext").innerHTML="invalid email";
        document.getElementById("lbltext").style.visibility="visible";
        document.getElementById("lbltext").style.color="black";
        return false;
    }
    else
    {
        return true;
    }

Upvotes: 0

BadPiggie
BadPiggie

Reputation: 6359

Since you are using return validate(), The onSubmit is expecting a boolean return value from validate(). So, If you want to submit the form you should return true, If not return false.

NOTE

  • If you want to access the form data in next page, You should set name property for your input fields.
  • Since you are using onSubmit, You don't need to put onClick to the button. And the button type should be submit not button.

    function validate()
        {
            var text = document.getElementById("text1").value;
            var regx = /^([a-zA-Z0-9\.-]+)@([a-zA-Z0-9-]+)\.([a-z]{3})$/;
            var uname = document.getElementById("name");
            var title = document.getElementById("title1");
            var comment = document.getElementById("cmt");


        if(regx.test(text))
            {
            document.getElementById("lbltext").innerHTML="you may proceed";
            document.getElementById("lbltext").style.visibility="visible";  
            document.getElementById("lbltext").style.color="green";
            return true;
            }
        else{
            document.getElementById("lbltext").innerHTML="invalid email";
            document.getElementById("lbltext").style.visibility="visible";
            document.getElementById("lbltext").style.color="black";
            return false;
            }

        }
<body>
<form onsubmit = "return validate()" action = "thankyou.html" class = "input"><br><br>
    <p style = "text-decoration: underline; color: white;">comment :</p><br>
    <input id= "name" placeholder= "Name" type= "text" style = "height: 25px; width:250px;"/><br><br>
    <input id = "text1" placeholder = "Email" type= "text" style = "height: 25px; width: 250px;"/><p style = "font-size: 25px; color: red; display: inline-block;">*</p><label id= "lbltext" style = "color: black;visibility: hidden"></label><br><br>
    <input id= "title1" placeholder= "title" type= "text" style = "height: 25px; width: 500px;"/><br><br>
    <textarea id= "cmt" placeholder= "Comment" type= "text" style = "height: 250px; width: 500px;"></textarea><br><br>
    <button type="submit" style = "color: white; font-weight: bold; background-color:  #9933ff; width: 75px; height: 30px;float: right; margin-right: 90px; border:thick; border-color: black;">Submit</button>
    </form>
</body>

Upvotes: 2

Related Questions