javascript - 验证失败时禁用按钮

Question

我有一个表单，它有一个提交按钮，我想禁用提交按钮，直到所有验证都为真。

当前，当一个验证为 true 时，按钮会启用。（甚至其他字段也有红色错误消息。）

<script>           
     $(document).ready(function() {
                    $('[data-toggle="tooltip"]').tooltip();
                    $('#payment-form').formValidation({
                      framework: 'bootstrap',
                      trigger: 'change',
                      fields: {
                        first_name: {
                          validators: {
                            notEmpty: {
                              message: 'The First Name field is required and cannot be empty'
                            }
                            // regexp: {
                            // regexp: /^[a-z\\s]+$/i,
                            // message: 'The first name field can consist of alphabetical characters and spaces only'
                            // }
                          }
                        },
                        last_name: {
                          validators: {
                            notEmpty: {
                              message: 'The Last Name is required and cannot be empty'
                            }
                            // regexp: {
                            // regexp: /^[a-z\\s]+$/i,
                            // message: 'The Last name can consist of alphabetical characters and spaces only'
                            // }
                          }
                        },
    }
                      });


                 }).on('success.form.fv', function (e) {
                  $('#continue_btn').attr('disabled','false');
                   e.preventDefault();

                    });
                    var i = 0;
                    var l=0;

                    $('#zip_code').keydown(function()
                    {

                      var country_check = $('#country').val();
                      if(country_check=='India')
                      {
                        $('#zip_code').attr('maxlength', '6');
                      }
                      else
                      {
                        $('#zip_code').attr('maxlength', '10');
                      }

                    });
</script>

这个怎么做 ？

Answer 1

在 formValidation 中设置以下属性，您可以在表单设置中看到：http: //formvalidation.io/settings/

$('#data_form').formValidation({
...
   button: {
       selector: "#id_submit_btn",
       disabled: "disabled"
   }
....
});

Answer 2

您可以toggle在提交按钮上使用。

$('button[data-toggle]').on('click', function() {
    var $target = $($(this).attr('data-toggle'));
    $target.toggle();
    if (!$target.is(':visible')) {                         
        $('#payment-form').data('formValidation').disableSubmitButtons(false);
    }
});