Enable submit button in Bootstrap validator

Question

I am using Bootstrap validator and the problem I am having is that I want to enable to submit button after all values are valid but unable to do so.

$(document).ready(function() {
    $('#ans_frm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitButtons: 'button[type="submit"]',
        fields: {
            ans: {
                group: '.col-md-8',
                validators: {

                    stringLength: {
                        min: 3,
                        max: 100,
                        message: 'The answer must be more than 2 and less than 100 characters long'
                    },
                    notEmpty: {
                        message: 'The answer must not be empty'
                    }
                }

            }
        }
    }).on('status.field.bv', function(e, data) {

                disableSubmitButtons(false);
            }
        });
});

dannytranlx · Accepted Answer · 2014-11-04 23:42:12Z

3

You need to disable the submit button .on('error.field.bv') and enable it back on .on('status.field.bv').

And you should be using data.bv.disableSubmitButtons() method!

Can you try this?

$(document).ready(function() {
    $('#ans_frm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        submitButtons: 'button[type="submit"]',
        fields: {
            ans: {
                group: '.col-md-8',
                validators: {
                    stringLength: {
                        min: 3,
                        max: 100,
                        message: 'The answer must be more than 2 and less than 100 characters long'
                    },
                    notEmpty: {
                        message: 'The answer must not be empty'
                    }
                }
            }
        }
    }).on('error.field.bv', function(e, data) {
            data.bv.disableSubmitButtons(true); // disable submit buttons on errors
        }
    }).on('status.field.bv', function(e, data) {
            data.bv.disableSubmitButtons(false); // enable submit buttons on valid
        }
    });
});

answered Nov 4, 2014 at 23:42

dannytranlx

1758 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Umerm Over a year ago

Its does send values to the next page but it does not validate.The button is enabled all the time even when the values are not right.

Savan Kachhiya Patel · Accepted Answer · 2014-11-19 13:29:06Z

2

Use this

$('#ans_frm').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            live: 'enabled',
            trigger: null
        }).on('success.form.bv', function (e) {
            // Prevent submit form
            // e.preventDefault();
        })
      .on('error.form.bv', function () {

      });

answered Nov 19, 2014 at 13:29

Savan Kachhiya Patel

1,0849 silver badges16 bronze badges

Collectives™ on Stack Overflow

Enable submit button in Bootstrap validator

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related