需要输入的引导加载状态问题答案

【问题标题】：Bootstrap loading state issue with required input需要输入的引导加载状态问题
【发布时间】：2017-05-30 13:16:00
【问题描述】：

我是 Bootstrap 3 的新手。我想在表单中使用加载状态按钮功能。我用这样的必需选项创建了输入字段；

<form>
  <input class="input" name="title" type="text" required />
  <button type="submit" data-loading-text="Loading..." class="btn btn-primary">
    Loading state
  </button>
</form>

$("button").click(function() {
  var $btn = $(this);
  $btn.button('loading');
});

如果我在输入为空时单击提交按钮，提交按钮将被禁用。即使我填写了输入...

这里Fiddle

感谢回答

【问题讨论】：

标签： javascript jquery twitter-bootstrap input

【解决方案1】：

要解决此问题，请挂钩到 form 的 submit 事件，而不是 button 的 click。这是有效的，因为只有在字段有效时才会提交表单，因此必须在更改按钮状态之前修复验证错误。试试这个：

$("form").submit(function(e) {
  var $btn = $(this).find('button');
  $btn.button('loading');

  e.preventDefault(); // only for this demo to stop the actual form submission

  // make your AJAX request here...
});

.input,
.btn-primary {
  display: block;
  width: 400px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<form>
  <input class="input" name="title" type="text" required />
  <button type="submit" data-loading-text="Loading..." class="btn btn-primary">
      Loading state
  </button>
</form>

【讨论】：

没问题，很高兴为您提供帮助