JavaScript redirect page after form input validation

Question

I have written JavaScript code complete with form validation, but I don't know how to auto redirect after form validation "after the user enters email" he will go directly to the new page after clicking the arrow or enter.

Here is the code:

(function ($) {
"use strict";

/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');

$('.validate-form').on('submit',function(){
    var check = true;

    for(var i=0; i<input.length; i++) {
        if(validate(input[i]) == false){
            showValidate(input[i]);
            check=false;
        }
    }

    return check;
});


$('.validate-form .input100').each(function(){
    $(this).focus(function(){
       hideValidate(this);
    });
});

function validate (input) {
    if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
        if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
            return false;
        }
    }
    else {
        if($(input).val().trim() == ''){
            return false;
        }
    }
}

function showValidate(input) {
    var thisAlert = $(input).parent();

    $(thisAlert).addClass('alert-validate');
}

function hideValidate(input) {
    var thisAlert = $(input).parent();

    $(thisAlert).removeClass('alert-validate');
}



/*==================================================================
[ Simple slide100 ]*/

$('.simpleslide100').each(function(){
    var delay = 7000;
    var speed = 1000;
    var itemSlide = $(this).find('.simpleslide100-item');
    var nowSlide = 0;

    $(itemSlide).hide();
    $(itemSlide[nowSlide]).show();
    nowSlide++;
    if(nowSlide >= itemSlide.length) {nowSlide = 0;}

    setInterval(function(){
        $(itemSlide).fadeOut(speed);
        $(itemSlide[nowSlide]).fadeIn(speed);
        nowSlide++;
        if(nowSlide >= itemSlide.length) {nowSlide = 0;}
    },delay);
});


})(jQuery);

Please help me, where should i put the form validation redirection?, any help would be appreciated.

This is the code for the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>AN Newsletter | Subscribe</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>



    <div class="flex-w flex-str size1 overlay1">
        <div class="flex-w flex-col-sb wsize1 bg0 p-l-70 p-t-37 p-b-52 p-r-50 respon1">
            <div class="wrappic1">
                <a href="#">
                    <img src="images/icons/logo.png" alt="IMG">
                </a>
            </div>

            <div class="w-full p-t-100 p-b-90 p-l-48 p-l-0-md">

                <h3 class="l1-txt1 p-b-34 respon3">
                    Post Box
                </h3>

                <p class="m2-txt1 p-b-46">
                    Follow me for update now!
                </p>

                <form class="contact100-form validate-form m-t-10 m-b-10">
                    <div class="wrap-input100 validate-input m-lr-auto-lg" data-validate = "Email is required: ex@abc.xyz">
                        <input class="s2-txt1 placeholder0 input100 trans-04" type="text" name="email" placeholder="Email Address">

                        <button class="flex-c-m ab-t-r size2 hov1 respon5">
                            <i class="zmdi zmdi-long-arrow-right fs-30 cl1 trans-04"></i>
                        </button>

                        <div class="flex-c-m ab-t-l s2-txt1 size4 bor1 respon4">
                            <span>Subcribe Now:</span>
                        </div>
                    </div>
                </form>

            </div>

            <div class="flex-w flex-m">
                <span class="m2-txt2 p-r-40">
                    Follow me
                </span>

                <a href="https://www.facebook.com/stevenWilliamG" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
                    <i class="fa fa-facebook"></i>
                </a>

                <a href="https://twitter.com/AdrikAleandra" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
                    <i class="fa fa-twitter"></i>
                </a>

                <a href="https://www.instagram.com/audynaufal7/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
                    <i class="fa fa-instagram"></i>
                </a>

                <a href="https://www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
                    <i class="fa fa-linkedin"></i>
                </a>

            </div>
        </div>


        <div class="wsize2 bg-img1 respon2" style="background-image: url('images/bg01.jpg');">
        </div>
    </div>





<!--===============================================================================================-->
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/bootstrap/js/popper.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
    <script src="vendor/tilt/tilt.jquery.min.js"></script>
<!--===============================================================================================-->
    <script src="js/main.js"></script>

</body>
</html>

P.S:

I'm confused about the way, can you show me where to put the syntax in my code please?

use `window.location = "http://www.yoururl.com";` to understand better check this link: https://stackoverflow.com/questions/4744751/how-do-i-redirect-with-javascript or this link: https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage — Marik Ishtar, Jun 26 '20 at 00:36
Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — Marik Ishtar, Jun 26 '20 at 00:37
Please brush up on HTML forms. All you need to do is add an action. https://www.w3schools.com/html/html_forms.asp — Mocking, Jun 26 '20 at 01:04
Does this answer your question? [JavaScript post request like a form submit](https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit) — Mocking, Jun 26 '20 at 01:06

Pavlos Karalis · Answer 1 · 2020-06-26T02:12:25.517

0

Within your validation function you would conditionally have

window.location.href = "new url"

occur after a successful validation.

Edit: Is this what gets called on submit?

$('.validate-form').on('submit',function(){
    var check = true;

    for(var i=0; i<input.length; i++) {
        if(validate(input[i]) == false){
            showValidate(input[i]);
            check=false;
        }
    }
    //add it here if so
    if(check) window.location.href = "new url";
});

edited Jun 26 '20 at 02:12

answered Jun 26 '20 at 01:03

Pavlos Karalis

2,685
1
4
13

I'm confused about the way, can you show me where to put the syntax in my code please? – Audy Naufal Jun 26 '20 at 01:53

score 0 · Answer 2 · answered Jun 26 '20 at 02:10

You should give your form an action. That way, when it is submitted, it will automatically redirect to the URL specified, sending along the form data.

<form class="contact100-form validate-form m-t-10 m-b-10" action="someURL">

See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes

JavaScript redirect page after form input validation

2 Answers2