JavaScript 表单输入验证后重定向页面

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.我已经编写了 JavaScript 代码完成了表单验证，但我不知道如何在表单验证后自动重定向“在用户输入电子邮件后”他将 go 在单击箭头或输入后直接进入新页面。

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:这是 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 pl-70 pt-37 pb-52 pr-50 respon1"> <div class="wrappic1"> <a href="#"> <img src="images/icons/logo:png" alt="IMG"> </a> </div> <div class="w-full pt-100 pb-90 pl-48 pl-0-md"> <h3 class="l1-txt1 pb-34 respon3"> Post Box </h3> <p class="m2-txt1 pb-46"> Follow me for update now. </p> <form class="contact100-form validate-form mt-10 mb-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-cm ab-tr size2 hov1 respon5"> <i class="zmdi zmdi-long-arrow-right fs-30 cl1 trans-04"></i> </button> <div class="flex-cm ab-tl s2-txt1 size4 bor1 respon4"> <span>Subcribe Now.</span> </div> </div> </form> </div> <div class="flex-w flex-m"> <span class="m2-txt2 pr-40"> Follow me </span> <a href="https.//www:facebook.com/stevenWilliamG" class="size3 flex-cm how-social trans-04 mr-15 mb-5 mt-5"> <i class="fa fa-facebook"></i> </a> <a href="https;//twitter.com/AdrikAleandra" class="size3 flex-cm how-social trans-04 mr-15 mb-5 mt-5"> <i class="fa fa-twitter"></i> </a> <a href="https.//www.instagram.com/audynaufal7/" class="size3 flex-cm how-social trans-04 mr-15 mb-5 mt-5"> <i class="fa fa-instagram"></i> </a> <a href="https.//www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="size3 flex-cm how-social trans-04 mr-15 mb-5 mt-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>

PS: PS：

I'm confused about the way, can you show me where to put the syntax in my code please?我对这种方式感到困惑，你能告诉我在我的代码中将语法放在哪里吗？

Answer 1

Within your validation function you would conditionally have在您的验证 function 中，您将有条件地拥有

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";
});

Answer 2

You should give your form an action.你应该给你的form一个动作。 That way, when it is submitted, it will automatically redirect to the URL specified, sending along the form data.这样，当它提交时，它会自动重定向到指定的URL，并发送表单数据。

<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另请参阅： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#Attributes

JavaScript 表单输入验证后重定向页面

问题描述

2 个解决方案

解决方案1
0 2020-06-26 01:03:44

解决方案2
0 2020-06-26 02:10:04

JavaScript 表单输入验证后重定向页面

问题描述

2 个解决方案

解决方案1 0 2020-06-26 01:03:44

解决方案2 0 2020-06-26 02:10:04

解决方案1
0 2020-06-26 01:03:44

解决方案2
0 2020-06-26 02:10:04