Jquery Validate allowing submit with rules not met

Question

I have the following form that I am trying to add jquery validate to it. My issue is that none of the validation messages are appearing when I hit submit and if I hit submit twice, the form submits. So, essentially the validation is not working.

Does anyone see what I am doing wrong?

I am using the following libraries:

  



    
    
    
    
    


$("#proposal-form").submit(function (e) {
        e.preventDefault();
         $("#proposal-form").validate({
            onfocusout : true,
             errorPlacement: function(error, element) {
                error.appendTo( element.parent("input").next("input") );
             },
            rules: {
                proposal_name: {
                    required: true,
                    minlength: 2
                },
                proposal_email: {
                    required: true,
                    email: true
                },
                proposal_phone: {
                    required: true,
                    digits: true,
                    minlength: 10
                },
                proposal_location: {
                    required: true,
                    minlength: 2
                }
            },
            messages: {
                proposal_name: {
                    required: "Please enter your name",
                    minlength: "Your name seems a bit short."
                },
                proposal_email: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                },
                proposal_phone: {
                    required: "Please enter your phone number",
                    digits: "Please enter a valid phone number",
                    minlength: "Your number seems a bit short."
                },
                proposal_location: {
                    required: "Please enter your name",
                    minlength: "Your name seems a bit short, doesn't it?"
                }
            },
            submitHandler: function(form) {
            var proposal_name = $('#proposal-name').val();
            var proposal_email = $('#proposal-email').val();
            var proposal_phone = $('#proposal-phone').val();
            var proposal_location = $('#proposal-location').val();

                $.ajax({
                    url: "php/proposal-send.php", 
                    type: "POST",
                    data: {
                        "proposal_name": proposal_name,
                        "proposal_email": proposal_email,
                        "proposal_phone": proposal_phone,
                        "proposal_location": proposal_location
                    },
                    success: function (data) {
                        if (data == "Error!") {
                            alert(data);
                        } else {
                            $("#proposal-form")[0].reset();
                            $('#proposal-panel-inner').hide();
                            $('#proposal-success').fadeIn();
                            function successProposal() {
                                $('#proposal-panel').removeClass('active');
                                $('html').removeClass('is-navOpen');
                                $('.ssm-overlay').fadeOut();
                            }
                            setTimeout (successProposal, 2000)
                        }
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert(textStatus + " | " + errorThrown);
                    }
                });
            }
        });
    });

Sparky · Accepted Answer

Does anyone see what I am doing wrong?

The markup in your OP's code does not contain name attributes. Without name attributes, the validation will not work at all. See documentation. Not only must you have name attributes, only these names can be used within the rules object of .validate().

rules: {
    proposal_name: {  // <- this MUST match the NAME attribute only
        required: true,
        minlength: 2
    }
    ....

Another major problem here is that the .validate() method is enclosed in a .submit() handler. Since the .validate() method is simply the plugin's initialization, AND the submit event is already captured and handled internally, you do not need your own .submit() event handler. (This is exactly why two clicks are needed). EDIT: A click handler is not much different. It's not needed and makes no sense (emphasis on "initialization", as in .validate() is the initialization method).

$("#proposal-form").submit(function (e) {  // <- NOT needed
    e.preventDefault();                    // <- NOT needed
    $("#proposal-form").validate({
        onfocusout: true,                  // <- 'true' is NOT valid
        ....

You also do not need onfocusout: true because true is not an acceptable parameter for this option. The default behavior is to trigger validation on focus out, so setting onfocusout to true will break this plugin. It can only be set to false or an over-riding function.

$(document).ready(function() {         // ensure DOM is ready
    $("#proposal-form").validate({     // initialize plugin
        // rules & options
        ....

Finally, the jQuery DOM traversal employed by your errorPlacement function does not seem to make any sense based on the posted markup.

element.parent("input").next("input")

There is no input next to the parent of the input. The parent of the input is a div and the next element is a div. The next input is inside of this div that is next to the parent. It also makes no sense why you'd want to place the error message on the following input element, especially for the last element, which would never display a message.

DEMO: jsfiddle.net/Lhouzn84/

Jquery Validate allowing submit with rules not met

Answers (2)

Related Questions