jQuery validation: Initial/On the fly validation of checkbox

Question

I am using the jquery validation plugin: jQuery validation. Now, I have this snippet with a simple validation method which is used to verify the number of checked checkboxes based on a given parameter

$.validator.methods.cbMinRequired = function (value, element, param) {
  return $(element).parent().find(":checked").length >= param;
};

$(function () {
    // validate the comment form when it is submitted
    $("#myform").validate({
        keyup: true,
        keypress: true,
        click: true,
        change: true,
        debug: true,
        errorClass: "invalid",
        rules: {
            mycheckboxes: {
                cbMinRequired: 1
            }
        }
    });
  });

Check out my Fiddle: jsFiddle checkbox vaidation example

As you can see, I have a problem.

I have to validate the form by triggering "submit" first. But I want to validate it after load. There is no option to trigger the submit initially as I think, since at the end I want to trigger a 'save action' with this button which shouldn't be invoked after page load.

Any kind of ideas how to cope with this?

There are no such options for this plugin called `keyup`, `keypress`, `click`, or `change`. — Sparky, Sep 02 '13 at 15:06

Barmar · Answer 1 · 2013-09-02T15:11:32.490

1

You can call the .valid() method to trigger a validation without submitting.

if (!$("#myform").valid()) {
    // Complain
}

See my version of your fiddle, it displays the validation message when the page loads.

edited Sep 02 '13 at 15:11

answered Sep 02 '13 at 14:58

Barmar

741,623
53
500
612

It doesn't work in my case: I want to see the error messages. Its so strange: a simple range input field is checked on the fly but first, after losing one times the focus. It doesn't need submit then. Checkboxes do need that action. It makes the plugin needless in my case. Really bad :/ – John Rumpel Sep 02 '13 at 15:06
Works for me, if I understand what you want. See my fiddle. – Barmar Sep 02 '13 at 15:11
Another (stupid) issue was that I've tried to trigger it on this way: $("#myform").validate({ ... }).valid() ... don't try it! :) If I separate the calls, it works fine – John Rumpel Sep 02 '13 at 15:27
Yeah, it looks like he didn't code it properly so that it can be chained. `.validate()` returns a validator object, not a jQuery object. – Barmar Sep 02 '13 at 15:30

Sparky · Accepted Answer · 2013-09-02T15:11:09.633

Your code:

$(function () {
    $("#myform").validate({
        keyup: true,
        keypress: true,
        click: true,
        change: true,
        debug: true,
        errorClass: "invalid",
        rules: {
            mycheckboxes: {
                cbMinRequired: 1
            }
        }
    });
});

There is a major issue with your code: There are no such options for this plugin called keyup, keypress, click, or change. They are called onkeyup, onfocusout, onclick, and onsubmit and they are already "true" by default... they cannot be set to true without breaking the plugin. You can only set them to false to disable, or set them to a custom function.

Then you can programatically trigger a validation test at any time you wish by using the .valid() method.

$("#myform").valid();

This will trigger validation on page load...

$(function () {

    $("#myform").validate({ // initialize the plugin
        // options
    });

    $("#myform").valid(); // trigger validation on page load

});

Your DEMO updated: http://jsfiddle.net/sVwFb/4/

score -1 · Answer 3 · answered Sep 02 '13 at 15:00

-1

Barman is right, but if you want to submit onload and handle the submission on the second submit, you can use a flag variable and submit.

$('#myform').submit();
submitEnabled = true;

here the jsFiddle updated.

answered Sep 02 '13 at 15:00

Daniele

1,938
16
24

jQuery validation: Initial/On the fly validation of checkbox

3 Answers3

Linked