programer.tips, another cool thing from @nghuuphuoc!

Enabling the submit button all the time

Examples

Improve it on Github

By default, the submit buttons will be disabled if there is at least one invalid field.

If you want to enable the submit buttons all the time, triggering the status.field.bv event and using the disableSubmitButtons() method:

<form id="enableButtonForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label">Task</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="task" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Description</label>
        <div class="col-sm-5">
            <textarea class="form-control" name="description" rows="5"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Priority</label>
        <div class="col-sm-5">
            <select class="form-control" name="priority" style="width: 200px;">
                <option value="">Choose the priority</option>
                <option value="low">Low</option>
                <option value="medium">Medium</option>
                <option value="high">High</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-5 col-sm-offset-3">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#enableButtonForm')
        .bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                task: {
                    validators: {
                        notEmpty: {
                            message: 'The task is required'
                        }
                    }
                },
                description: {
                    validators: {
                        notEmpty: {
                            message: 'The description is required'
                        }
                    }
                },
                priority: {
                    validators: {
                        notEmpty: {
                            message: 'The priority is required'
                        }
                    }
                }
            }
        })
        .on('status.field.bv', function (e, data) {
            // $(e.target)  --> The field element
            // data.bv      --> The BootstrapValidator instance
            // data.field   --> The field name
            // data.element --> The field element

            data.bv.disableSubmitButtons(false);
        });
});

If you want the submit button to be enabled only after clicking it, use the getSubmitButton() method to check whether or not the submit button is clicked:

$(document).ready(function() {
    $('#enableButtonForm')
        .bootstrapValidator({
            ...
        })
        .on('status.field.bv', function(e, data) {
            if (data.bv.getSubmitButton()) {
                data.bv.disableSubmitButtons(false);
            }
        });
});