v0.5.3 is released on 2014.11.05!

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 error.field.bv, success.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('error.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);
        })
        .on('success.field.bv', function(e, data) {
            // e, data parameters are the same as in error.field.bv event handler
            // Despite that the field is valid, by default, the submit button will be disabled if all the following conditions meet
            // - The submit button is clicked
            // - The form is invalid
            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('error.field.bv', function(e, data) {
            if (data.bv.getSubmitButton()) {
                data.bv.disableSubmitButtons(false);
            }
        })
        .on('success.field.bv', function(e, data) {
            if (data.bv.getSubmitButton()) {
                data.bv.disableSubmitButtons(false);
            }
        });
});