带有所需输入的Bootstrap加载状态问题

Question

我是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');
});

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

这里小提琴

谢谢你的回答

Answer 1

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

 $("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>