Bootstrap loading state issue with required input

Question

I'm new to Bootstrap 3. I want to use loading state button function in form. I created input field with required option like this;

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

if I click the submit button when input is empty, submit button gets disabled. even after I fill the input...

Here Fiddle

thanks for answers

Answer 1

To fix this, hook to the submit event of the form instead of the click of the button. This works because the form will only be submit if the fields are valid, hence validation errors have to be fixed before you change the state of the button. Try this:

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