How to submit form using Bootstrap Validation

Question

I am using Bootstrapvalidation to check my input fields. On top of that, I have additional check that is done on submit. It's either submitted without showing errors or, when I use this:

$("#form").submit(function(ev){
    ev.preventDefault();
});

$("#submit-form").on("click", function(){
    var valid=some code for additional check;
    if (valid) {
        $("#form").submit();
    }
    else {
        return;
    }
});

But then it's just all recursive and the form doesn't get submitted. How to I get this to work?

Answer 1

Refer following example

<script>
$(document).ready(function() {
    $('#taskForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                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'
                        }
                    }
                }
            }
        })
        .on('success.field.fv', function(e, data) {
            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
                data.fv.disableSubmitButtons(true);
            }
        });
});
</script>

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

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

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <!-- Initially, the submit button is disabled -->
            <button type="submit" class="btn btn-default" disabled="disabled">Submit</button>
        </div>
    </div>
</form>