enable/disable of submit button based on other elements of the form using zurb foundation

Question

I have created a form with a few inputs and a button using zurb foundation, is it possible to disable the button till all the fields of the form are being attended ?

Answer 1

You can identify all your required inputs (with a class) and then when any of them changes or get focusout-ed check if there are empty ones. If there all filled, then enable the button.

// Bind the events to the inputs
// You can use any class nedded, this covers selects too
// You even can add more events to suite your needs
$('.input-required').on('focusout change', function() {
  // We instantiate a variable to hold the button status
  var buttonDisabled = false;
  // Iterate every input
  $('.input-required').each(function() {
      // If there is any empty...
      if (!$(this).val()) {
        // We say true to the disableness of the button
        buttonDisabled = true;
      }
    })
    // Set the status to the button
  $('button').prop('disabled', buttonDisabled);
});

form {
  width: 460px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form action="#">
  <input type="text" class="input-required">
  <input type="text" class="input-required">
  <input type="text" class="input-required">
  <input type="text" class="input-required">
  <input type="text" class="input-required">
  <input type="text" class="input-required">

  <hr>
  <button type="submit" disabled>Process</button>
</form>