Twitter Bootstrap Question posted in

JavaScript redirect page after form input validation-Twitter bootstrap

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: [email protected]">
                        <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?

Tags:

2

Answers


  1. 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";
});
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search