Jquery Validation not working on form without label

Question

I have an input form like this:

<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>

and here's my jquery validation code:

$("#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",
            },
        },
    });

I don't know why its not working, is it because not using label or something? because i'm using this same scripts on a form with label before and it's working. so what can cause the validation not working?

This might help. [enter link description here](https://stackoverflow.com/questions/18296267/form-validation-with-bootstrap-jquery) — warkitty, Aug 09 '19 at 13:33
@Keith it's strange, in my code it just submits without doing any validation. do you know what may cause it? — Ying, Aug 09 '19 at 13:36
Without seeing all your code, I'd first check to make sure that validation is hitting the page ( add in a console.log in your code to see if it's hitting ). Also, make sure there isn't another id with the same name — Keith, Aug 09 '19 at 13:38
Whether or not you have a `label` has nothing to do with anything, and the code you've posted above in the OP is working fine. But the code in [your jsFiddle](https://jsfiddle.net/agtqxp48/) does not match the code in your OP ... you completely left the Ajax and click handler out of your OP; that is the most critical part and the whole reason why your code was not working properly. The correct way is to put the Ajax in the `submitHandler` : https://jsfiddle.net/4js6p8oa/ — Sparky, Aug 10 '19 at 03:50

Keith · Accepted Answer · 2019-08-09T13:56:09.060

You aren't validating on the button click so you can add your submit in your validator:

$(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/

This makes no sense. Why would you force an Ajax submit immediately upon validation of a field without having to click the button? You might not understand the definition of the `success` callback in this plugin. See: https://jqueryvalidation.org/validate/#success - or maybe you meant `submitHandler` - Please refer to the docs to be sure for yourself: https://jqueryvalidation.org/validate/#submithandler — Sparky, Aug 10 '19 at 03:46

Jquery Validation not working on form without label

1 Answers1

Linked