Question

仅在静态页面上工作..没有后端存在...嗨试图在html页面之间导航，并且成功。但是只有在表单正确验证时才需要切换页面，已经尝试过但不能正常工作.. 需要一些帮助...

HTML：

<div class="formContainer">
        <form class="form" id="loginForm">
            <div class="form-group">
                <label>Login</label>
            </div>
            <div class="form-group">
                <label for="loginForm-email">Email address</label>
                <input type="email" class="form-control" id="loginForm-email" name="loginForm-email" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label for="loginForm-password">Password</label>
                <input type="password" class="form-control" id="loginForm-password" name="loginForm-password" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

JS：

$(document).ready(function () {
              var fnValidate =  $("#loginForm").validate({
                    rules: {
                        "loginForm-email": {
                            required: true,
                            email: true
                        },  
                        "loginForm-password": {
                            required: true,
                            minlength: 5
                        } 
                    }
                });

                 $('.btn').click(function(e) {
                    e.preventDefault();
                    if(fnValidate){
                    window.location.reload(true);
                    window.location.href = '../html/userPage.html';
                    }
                    else{
                        alert('hia');
                    }
                });

            });

Answer 1

jQuery验证器具有您可以使用的自定义成功和失败回调。

根据您当前的方法，fnValidate将返回一个对象。所以你不知道它是否经过验证。所以尝试使用以下方法。

$(document).ready(function () {
    $("#loginForm").validate({
        rules: {
            "loginForm-email": {
                required: true,
                email: true
            },
                "loginForm-password": {
                required: true,
                minlength: 5
            }
        },
        submitHandler: function () {
            console.log("inside valid");
            window.location.reload(true);
            window.location.href = '../html/userPage.html';
            // this.submit()
        },
        invalidHandler: function (event, validator) {
            // 'this' refers to the form
            console.log("Please fill the form");
        }


    });

});

jsfiddle示例：http://jsfiddle.net/mohamedrias/2vvaN/2/

仅当表单有效时才会调用submitHandler。所以你可以提交表格。

在表单验证上的html页面之间导航

1 个答案: