在Bootstrap驗證器中啓用提交按鈕

Question

我正在使用Bootstrap驗證器，我遇到的問題是我希望在所有值都有效後啓用提交按鈕，但無法這樣做。

$(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); 
      } 
     }); 
}); 

Answer 1

你需要禁用提交按鈕.on('error.field.bv')，並使其回到.on('status.field.bv')。

而你應該使用data.bv.disableSubmitButtons()方法！

你可以試試嗎？

$(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 
     } 
    }); 
}); 

Answer 2

使用此

$('#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() { 

     });