【问题标题】:Form redirection after validating验证后表单重定向
【发布时间】:2019-12-16 12:06:25
【问题描述】:

所以我在课堂上做练习(找不到其中的逻辑,但没关系)。
所有验证,如模式、必需、所有规则和消息都使用 jQuery validate 完成,并且运行完美。
问题是: 我有一个登录表单,当用户未注册时,我将用户重定向到完整的注册表单,问题是在注册和验证并检查所有字段是否填写后,我不知道如何将用户重定向到 "gallery.html" .
代码如下:

HTML

  <form name="formulario_registro" id="formulario_registro" action="" method="POST">

        <label for="nif">NIF</label> <br>
        <input type="text" name="nif" id="nif" placeholder="&#127380;" readonly>
        <br>

        <label for="nombre">Nombre</label> <br>
        <input type="text" name="nombre" class="colortexto" id="nombre" placeholder="&#128100;" readonly>

        <br>

        <label for="apellidos">Apellidos</label> <br>
        <input type="text" name="apellidos" class="colortexto" id="apellidos" placeholder="&#128100;" readonly>

        <br>

        <label for="telefono">Teléfono</label> <br>
        <input type="number" name="telefono" class="colortexto" id="telefono" placeholder="&#128222;" min="600000000">

        <br>

        <label for="direccion">Dirección</label> <br>
        <input type="text" name="direccion" class="colortexto" id="direccion" placeholder="&#127968; ">

        <br>

        <label for="email">Email</label> <br>
        <input type="email" name="email" class="colortexto" id="email" placeholder="&#64; ">

        <br>


    <button type="submit" id="enviar">Enviar</button>


</form>

JS

$(document).ready(function() {
    //This is to fill the inputs from the login form in the current registration form. Not important, this works fine.
        $("#nif").val(localStorage.getItem("nif"));
        $("#nombre").val(localStorage.getItem("nombre"));
        $("#apellidos").val(localStorage.getItem("apellidos"));

        //this is the submit button, enviar is "send".

        $('#enviar').click(function(){

            alert("User has been registered succesfully, will be redirected to the gallery.");
            window.open("galeria.html");

        });

    }); 

编辑:有人要求查看我的验证,它们位于另一个不同的 .js 中,该 .js 链接在 HTML 以及 css、.js、库等的头部。正如我所说,它们运行完美,重定向是我不知道如何解决的唯一问题:) 非常感谢你帮助我!!!

他们在这里:

$(document).ready(function(){


jQuery.validator.addMethod("lettersonly", function(value, element) {
    return this.optional(element) || /^[a-z][a-z\s]*$/i.test(value);
    }, "Sólo letras y espacios");

jQuery.validator.addMethod("nifcorrecto", function(value, element){
    return this.optional(element) || /^[0-9]{8}[TRWAGMYFPDXBNJZSQVHLCKE]$/i.test(value);
}, "NIF incorrecto");    



$("#formulario_registro").validate({

    rules:{

        nif:{
            required:true,
            nifcorrecto:true
        },

        nombre:{
            required:true,
            rangelength:[3, 20],
            lettersonly:true
        },

        apellidos:{
            required:true,
            rangelength: [3,50],
            lettersonly:true
        },

        telefono:{
            required:true,
            min:600000000,
            max: 799999999
        },

        direccion:{
            required:true,
            minlength:4,
            maxlength:255
        },

        email:{
            required:true,
            email:true
        },
    },

    messages:{

        nif:{
            required:"Este campo es obligatorio",
            nifcorrecto:"Formato de DNI incorrecto"
        },

        nombre:{
            required:"Por favor, introduzca un nombre",
            rangelength:"El número de caracteres mínimo es de 3 hasta un máximo de 20",
        },

        apellidos:{
            required: "Por favor introduzca los apellidos",
            rangelength:"El número de caracteres mínimo es de 3 hasta un máximo de 50"
        },
        telefono:{
            required: "Introduzca su número de teléfono", 
            min: "Número de teléfono móvil debe ser entre 600000000 y 799999999",
            max: "Número de teléfono móvil debe ser entre 600000000 y 799999999"
        },

        direccion:{
            required:"Debe inrtoducir una dirección",
            minlength:"La dirección debe tener al menos 4 caracteres",
            maxlength:"La dirección debe tener como máximo 255 caracteres"
        },

        email:{
            required:"Es necesario introducir un email de contacto",
            email:"El formato de email no es correcto"
        },

    }
});


});

所以,我知道这是错误的,如果我点击,字段是否为空无关紧要,它只是重定向到galeria.html(图库)并且不听验证。
我有(在另一个不同的 .js 中)。
所以我需要单击,检查字段是否填充了正确的验证数据,然后重定向到 galeria.html
我不知道该怎么做, 请帮忙!

如果我删除所有 " $('#enviar').click(function()....... " 它会验证字段并警告我它们是错误的或空的,但显然不会将我重定向到任何地方。

PS:西班牙语不是问题,它可以完美运行。

【问题讨论】:

  • 您在哪里放置了验证......,请同时显示该代码

标签: javascript jquery forms validation redirect


【解决方案1】:

尝试添加一个boolean 变量,如果数据无效,则变为false

$(document).ready(function() {
    //This is to fill the inputs from the login form in the current registration form. Not important, this works fine.
    $("#nif").val(localStorage.getItem("nif"));
    $("#nombre").val(localStorage.getItem("nombre"));
    $("#apellidos").val(localStorage.getItem("apellidos"));

    //this is the submit button, enviar is "send".

    $('#enviar').click(function(){
        var valid = true;
        // your validations
        if($("#nif").val() == ""){
           valid = false;
        }
        // and so on all your validations
        if(valid){ // only if no errors
           alert("User has been registered succesfully, will be redirected to the gallery.");
           window.open("galeria.html");
        }

    });
});

如果您想重定向而不是打开新窗口,您可以使用: location.replace("galeria.html");

【讨论】:

  • 天哪,非常感谢!我现在要试试这个。 :)
猜你喜欢
  • 2013-11-05
  • 2013-02-17
  • 1970-01-01
  • 2020-05-24
  • 2014-04-08
  • 2021-10-10
  • 2021-03-08
  • 2011-05-29
  • 1970-01-01
相关资源
最近更新 更多