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

AudioSystem.getAudioInputStream

Answer 2

查看jquery验证我可以使用submitHandler选项来完成我想要的任务。

  $('#report-user-form').validate({
    submitHandler: function(form) {
      $('#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');
      form.submit();
    },
    rules: {
      "flag[reason]": "required"
    }
  });

如何在代码触发事件时使用.submit（）

2 个答案: