Jquery Validation不适用于没有标签的表单

Question

我有一个这样的输入表单：

<form class="login-form" action="/accounts/authenticate" method="post" id="login_form"  name="login_form">
                <input type="hidden" name="{{ csrf_name }}" value="{{ csrf_hash }}" />
                <div class="card mb-0">
                    <div class="card-body">
                        <div class="text-center mb-3">
                            <i class="icon-reading icon-2x text-slate-300 border-slate-300 border-3 rounded-round p-3 mb-3 mt-1"></i>
                            <h5 class="mb-0">Login to your account</h5>
                            <span class="d-block text-muted">Your credentials</span>
                        </div>

                        <div class="form-group form-group-feedback form-group-feedback-left">
                            <input type="email" id="email" name="email" class="form-control" placeholder="email">
                            <div class="form-control-feedback">
                                <i class="icon-user text-muted"></i>
                            </div>
                        </div>

                        <div class="form-group form-group-feedback form-group-feedback-left">
                            <input type="password" id="password" name="password" class="form-control" placeholder="Password">
                            <div class="form-control-feedback">
                                <i class="icon-lock2 text-muted"></i>
                            </div>
                        </div>

                        <div class="form-group d-flex align-items-center">
                            <div class="form-check mb-0">
                                <label class="form-check-label">
                                    <input type="checkbox" name="remember" class="form-input-styled" checked data-fouc>
                                    Remember
                                </label>
                            </div>

                            <a href="/accounts/recover" class="ml-auto">Forgot password?</a>
                        </div>

                        <div class="form-group">
                            <button type="submit"  id="login_button" class="btn btn-primary btn-block">Sign in
                                <i class="icon-circle-right2 ml-2"></i></button>
                        </div>

                        <span class="form-text text-center text-muted">By continuing, you're confirming that you've read our <a href="#">Terms &amp; Conditions</a> and <a href="#">Cookie Policy</a></span>
                    </div>
                </div>
            </form>

这是我的 jquery 验证代码：

$("#login_form").validate({
        rules: {
            email: {
                required: true,
                email: true,
            },
            password: {
                required: true,
                minlength: 12,
            },
        },
        messages: {
            email: {
                required: "Please enter valid email",
                email: "Please enter valid email",
            },
        },
    });

我不知道为什么它不起作用，是因为没有使用标签还是什么？因为我之前在带有标签的表单上使用了相同的脚本并且它正在工作。那么什么会导致验证不起作用？

Answer 1

您没有在按钮单击时进行验证，因此您可以在验证器中添加您的提交：

$(document).ready(function() {
    $('#success_alert').hide();
    let csrf_test_name = $("input[name=csrf_test_name]").val();

    $("#login_form").validate({
        rules: {
            email: {
                required: true,
                email: true,
            },
            password: {
                required: true,
                minlength: 12,
            },          
        messages: {
            email: {
                required: "Please enter valid email",
                email: "Please enter valid email",
            },
            password: {
                required: "Please enter a valid password"
            },
        },
    success: {
      function(){
        let btn = $(this);
        btn.html('please wait.. ');
        var email = $("input[name='email']").val();
        var password = $("input[name='password']").val();
        var remember = $("input[name='remember']").val();

        $.ajax({
            url: $(this).closest('form').attr('action'),
            type:$(this).closest('form').attr('method'),
            dataType: "json",
            data: {email:email, password:password, remember:remember, 'csrf_test_name' : csrf_test_name
            },
            success: function(data) {
                if(data.type == 'success'){
                    $('#success_alert').show();
                    btn.html('Login Success!');
                }else{
                        Swal.fire({
                            type: 'error',
                            title: 'Oops...',
                            html: data.text,
                        });
                    btn.html('Register');
                }
            }
        });
      }    
    }
    });

// just for the demos, avoids form submit
    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });

});

https://jsfiddle.net/cbfyhz5m/