Validate separated tabs Jquery Validator plugin

Question

I'm using the next Jquery Validator script;

jQuery.validator.addMethod("letras", function (value, element) {
    return this.optional(element) || value == value.match(/^[a-zA-Z ñÑáéíóúüç]+$/);
}, "Only letters.");

$(document).ready(function () {

        $('#inscripcion').validate({

                errorClass: 'form-control-error',
                validClass: 'form-control-sucess',
                ignore: "",

                submitHandler: function (form) {
                    if ($("#inscripcion").validate() == true) {
                        alert("Form not completed");
                    } else {
                        form.submit();
                    }
                },

                rules: {

                    nombrer: {
                        minlength: 2,
                        letras: true,
                        required: true
                    },
                    apellidor: {
                        minlength: 2,
                        required: true
                    },
                    cedular: {
                        minlength: 7,
                        number: true,
                        required: true
                    },

                    highlight: function (element) {
                        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                    },

                    success: function (element) {
                        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');

                    }
                });
        }); // end document.ready

    $('#menu a[href="#estudiante"]').click(function (event) {
        var estado = $('#inscripcion').valid();
        if (estado == false) {
            alert("You miss some data please complete it");
        }
    });

    $('#botonestu').click(function (event) {
        var estado = $('#inscripcion').valid();
        if (estado == false) {
            alert("You miss some data please complete it");
        }
    });

The problem is that if I use 'ignore: "",' the events that I made for when someone clicks a tab or a button activates even if the especified tab is full. But if i removeit somebody could click the submit button directly and it would submit the entire form even if it's complety empty. And also the "alert" in submitHandler its not working even tho the form.submit() is.

Show enough HTML to construct a concise example. – Sparky Nov 28 '13 at 17:09 — Sparky, Nov 28 '13 at 17:09

score 0 · Accepted Answer · edited May 23 '17 at 12:19

Your code:

submitHandler: function (form) {
    if ($("#inscripcion").validate() == true) {
        alert("Form not completed");
    } else {
        form.submit();
    }
},

$("#inscripcion").validate() is totally meaningless in this context. .validate() is only the initialization method of the plugin, not the testing method. Calling .validate() more than once will do nothing.
As per the documentation, the submitHandler only fires upon the click of the submit button when the form is valid. This means that testing for validity within the submitHandler is superfluous. In other words, this test inside the submitHandler is meaningless because whenever your if valid statement is evaluated, the form is already always valid.
If all you want to do is a form.submit(), then the entire submitHandler callback option needs to be removed. This is the default behavior of the plugin that you do not need to over-ride. Typically the submitHandler callback is used when you want to submit the form data with .ajax() and/or perform other actions when a form is valid.

I am not sure what you want to achieve with ignore: "", however, if you're trying to enable validation of hidden fields, use ignore: []. Otherwise, if you want hidden fields ignored for validation, remove the ignore option entirely, because this is already the default behavior of the plugin.

You've also incorrectly placed highlight and success inside of rules as well as a missing closing brace on rules:

$(document).ready(function () {

    $('#inscripcion').validate({
        // your other options,
        rules: {
            nombrer: {
                ...
            },
            ....
            highlight: function (element) { // <- incorrectly placed inside "rules" option
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function (element) {  // <- incorrectly placed inside "rules" option
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');

            }
        // <- missing a closing brace "}" here
    });

}); // end document.ready

Here is the working version of your code: http://jsfiddle.net/yyxLs/

Thanks I just checked my code and fix those missing braces and it worked! — Esteru, Nov 28 '13 at 22:54

Validate separated tabs Jquery Validator plugin

1 Answers1