jQuery Validation plugin - validate a mix of radio and checkbox inputs with Bootstrap 3

Question

On $(document).ready, the submit button is disabled. The button should be enabled only when the entire form is valid, i.e. 1) one radio (fruit) is selected, and 2) one or more checkboxes (occasions) are selected. I have looked at many answers here, and tried using function that tests if (form.valid()) on document change, but that evaluates to true when only the fruit is selected. I believe that the submitHandler is what I want to get at the whole form, but it's not firing. Changing the radios into checkboxes doesn't make a difference.

jsFiddle

html

<form id="categorizer-form" method="POST" action="\submit">
    <div class="container">
        <br><p>1. What <strong>kind</strong> of fruit is this?</p>
        <div class="btn-group col-xs-12" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="radio" name="kind" id="apple" value="apple">apple
            </label>
            <label class="btn btn-default">
                <input type="radio" name="kind" id="orange" value="orange">orange
            </label>
        </div>
    </div>

    <div class="container">
        <br><p>2. On what <strong>meal occasions</strong> would you eat it? (Please choose as many as apply.)</p>
        <div class="btn-group col-xs-12" data-toggle="buttons">
            <label class="btn btn-default">
                <input type="checkbox" name="occasion" id="breakfast" value="breakfast" >breakfast
            </label>
            <label class="btn btn-default">
                <input type="checkbox" name="occasion" id="lunch" value="lunch" >lunch
            </label>
            <label class="btn btn-default">
                <input type="checkbox" name="occasion" id="dinner" value="dinner" >dinner
            </label>
            <label class="btn btn-default">
                <input type="checkbox" name="occasion" id="snack" value="snack" >snack
            </label>
        </div>
    </div>
    <!-- ######################### -->
<br>
<br>
    <div class="well well2">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 text-center">
                    <button class='btn btn-lg btn-danger btn-next' type='submit' id='Next'>Click to submit</button>
                </div>
            </div>
        </div>
    </div>
</form>

js

$(document).ready(function() {

    $('.btn-next').attr('disabled', true)

    $( 'form#categorizer-form' ).validate({
        debug: true,
        rules: {
            kind: {
                required: true,
            },
            occasion: {
                required: true,
            }
        },

        submitHandler: function(form) {
            alert('submitHandler fired')
            $('.btn-next').prop('disabled', false).removeClass('btn-danger').addClass('btn-success');        // enables button
        }

    });

});

Answer 1

Your code...

submitHandler: function (form) {
    alert('submitted')
    $('.btn-next').prop('disabled', false).removeClass('btn-danger').addClass('btn-success'); // enables button
}

The submitHandler will only fire when both of these conditions are met...

1. The user clicks the submit button.

2. The form is valid.

Your submitHandler is not firing because your submit button is disabled and cannot be clicked. You cannot enable the submit button within the submitHandler because you have no way to trigger it without clicking the button.

Instead, you must enable the submit button outside of the submitHandler by using a change event handler, external to the .validate() method, that fires every time the form changes. Then you can use the .valid() method to test the form and decide if the button can be enabled.

$('#categorizer-form').on('change', function () {
    if ($(this).valid()) {
        // enable button
        $('.btn-next').prop('disabled', false).removeClass('btn-danger').addClass('btn-success'); 
    } else {
        // disable button        
        $('.btn-next').prop('disabled', true).addClass('btn-danger').removeClass('btn-success'); 
    }
});

DEMO: http://jsfiddle.net/h1r2fmj0/

---

Quote OP:

"... tried using function that tests if (form.valid()) on document change, but that evaluates to true when only the fruit is selected."

That is impossible, unless you somehow attached .valid() to the fruit field. Otherwise, when properly attached to the <form> element, .valid() can only return true when the whole form is valid.

In other words, form.valid() is meaningless, unless you've already defined var form = $('#categorizer-form').

It must be attached to a variable or selector that targets the <form> element. Depending on how/where you used it, the form keyword may not work. (The form keyword is only for use inside of certain callback functions like submitHandler. However, you normally would not use the .valid() method anywhere inside of the .validate() method.)

Notice in the demo code above where $(this).valid() is the same as $('#categorizer-form').valid(), because $(this) represents $('#categorizer-form').

---

You need to show us the code that is causing the problem you describe.