javascript - 代码触发事件时如何使用.submit()

Question

在我的 Rails 应用程序中，我有一个模态表单，如下所示:

<div id="flag-user-modal" class="modal in" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4>Report user</h4>
      </div>
      <div class="modal-body">
        Why are you reporting this user?
        <form id="report-user-form" novalidate="novalidate" class="simple_form flag" action="/user_users/flag" accept-charset="UTF-8" method="post">
          <div class="form-group hidden flag_user_user_id"><input value="26" class="hidden form-control" type="hidden" name="flag[user_id]" id="flag_user_id"></div>
          <div class="form-group text required flag_reason" aria-required="true">
            <textarea rows="2" class="text required form-control" name="flag[reason]" id="flag_reason" aria-required="true"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button id="submit" class="btn btn-primary btn-disabler">
          <span class="btn-label">Report</span>
        </button>
      </div>
    </div>
  </div>
</div>

我用一些 jquery 提交它:

  $('#flag-user-modal #submit').on('click', function() {
    $('#flag-user-modal form').submit();
  });

我正在使用 jquery validate 验证表单:

  $('#report-user-form').validate({
    rules: {
      "flag[reason]": "required"
    }
  });

我想在成功提交时禁用提交按钮并显示加载指示器，以便用户不能一直按提交，但我遇到了麻烦。

  $('#report-user-form').on('submit', function() {
    $(this).find('.btn-disabler')append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
    $(this).find('.btn-label').addClass('invisible');
  });

我读到 .submit() 事件在由代码激活时不会触发。这可能是也可能不是问题。关于如何实现我想要的功能的任何想法 - 仅在成功提交时禁用按钮并显示加载 fa-icon，而不是在 jquery 验证器失败时显示。

Answer 1

$('#submit').on('click', function() {
    validateForm();
});
$('#report-user-form').on('submit', function(event) {
    validateForm();     
});

function validateForm(){
    if($("#flag_reason").val()!=""){
        $('#report-user-form').find('.btn-disabler')append("<i class='fa fa-spinner fa-pulse btn-loader'>").disable(true);
        $('#report-user-form').find('.btn-label').addClass('invisible');
    }
}