Submit form after all fields are filled

Question

I have a form that appears on top of my header after the user clicks a button on the navigation called "subscribe".

When the user clicks this button, the subscription form opens on top of the header.
I am trying to have it so that the user cannot submit a form until all fields are filled in.

With the code I have written now, the form won't even open when the user clicks "subscribe" - nothing happens.

Previously, everything was working but the form would still submit when nothing was filled in.

How can I change my code so that the subscription form is opening again when the user clicks the subscribe button, and how can I get it so that the form cannot be submitted until all fields are full?

var $subscribe = $('#click-subscribe');
var $subscribeContent = $('#subscribe-content');
var $subscribeClose = $('#subscription-close');

$subscribeContent.hide();

$subscribe.on('click', function(e) {
  e.preventDefault();
  $subscribeContent.slideToggle();
});

$subscribeClose.on('click', function(e) {
  e.preventDefault();
  $subscribeContent.slideToggle();
})

var $formSubmit = $('#signup-submit'),
  $signupForm = $('.form-show'),
  $formReplace = $('#thank-you');

$formReplace.hide();

if (!$formSubmit.valid()) {
  return false;
} else {
  $formSubmit.on('click', function() {
    $signupForm.hide();
    $formReplace.show();
  })
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subscribe-content">
  <div class="subscription-signup">
    <div class="subscription-close" id="subscription-close"></div>
    <div class="email-signup">
      <p class="cat-title subscription-text">lorem ipsum</p>
      <p class="subscription-text">lorem ipsum</p>
      <p class="subscription-text">lorem ipsum</p>

      <div class="subscription-form">
        <form id="signup-form" class="form-show" name="signup-form" method="post" action="${URLUtils.url('Newsletter-SubscribeMobile')}">
          <div class="form-row salutation header">
            <label for="salutation">Title</label>
            <div class="chzn-row valid salutation">
              <select id="title" name="title" class="chzn-global-select input-select optional required">
                <option value="">--</option>
                <option value="Mr">Mr.</option>
                <option value="Mrs">Mrs.</option>
                <option value="Ms">Ms.</option>
                <option value="Miss">Miss</option>
              </select>
            </div>
          </div>

          <div class="form-row required">
            <label for="firstname">
              <span aria-required="true">First Name</span>
              <span class="required-indicator">*</span>
            </label>
            <input class="input-text required" id="firstname" type="text" name="firstname" value="" maxlength="500" autocomplete="off">
          </div>

          <div class="form-row required">
            <label for="lastname">
              <span aria-required="true">Surname</span>
              <span class="required-indicator">*</span>
            </label>
            <input class="input-text required" id="lastname" type="text" name="lastname" value="" maxlength="500" autocomplete="off">
          </div>

          <div class="form-row required">
            <label for="signup-email" style="display:none;">Email</label>
            <input class="header-signup-email" type="text" id="signup-email-header" name="signup-email" value="" placeholder="Email" />
          </div>
          <div class="form-row text-center">
            <input type="submit" name="signup-submit" id="signup-submit" class="subscribe-submit" value="Submit" />
          </div>
        </form>

        <div id="thank-you">
          <p>Thanks for subscribing!</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Here you go

var $subscribe = $('#click-subscribe');
var $subscribeContent = $('#subscribe-content');
var $subscribeClose = $('#subscription-close');

$subscribeContent.hide();

$subscribe.on('click', function(e) {
  e.preventDefault();
  $subscribeContent.slideToggle();
});

$subscribeClose.on('click', function(e) {
  e.preventDefault();
  $subscribeContent.slideToggle();
})

var $form = $('#signup-form'),
  $signupForm = $('.form-show'),
  $formReplace = $('#thank-you');

$formReplace.hide();


$form.on('submit', function() {
  var empty = $(this).find("input, select, textarea").filter(function() {
    return this.value === "";
  });

  if (empty.length <= 0) {
    $signupForm.hide();
    $formReplace.show();
  } else {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click-subscribe">Show / hide form</button>
<div id="subscribe-content">
  <div class="subscription-signup">
    <div class="subscription-close" id="subscription-close"></div>
    <div class="email-signup">
      <p class="cat-title subscription-text">lorem ipsum</p>
      <p class="subscription-text">lorem ipsum</p>
      <p class="subscription-text">lorem ipsum</p>

      <div class="subscription-form">
        <form id="signup-form" class="form-show" name="signup-form" method="post" action="${URLUtils.url('Newsletter-SubscribeMobile')}">
          <div class="form-row salutation header">
            <label for="salutation">Title</label>
            <div class="chzn-row valid salutation">
              <select id="title" name="title" class="chzn-global-select input-select optional required">
                <option value="">--</option>
                <option value="Mr">Mr.</option>
                <option value="Mrs">Mrs.</option>
                <option value="Ms">Ms.</option>
                <option value="Miss">Miss</option>
              </select>
            </div>
          </div>

          <div class="form-row required">
            <label for="firstname">
              <span aria-required="true">First Name</span>
              <span class="required-indicator">*</span>
            </label>
            <input class="input-text required" id="firstname" type="text" name="firstname" value="" maxlength="500" autocomplete="off">
          </div>

          <div class="form-row required">
            <label for="lastname">
              <span aria-required="true">Surname</span>
              <span class="required-indicator">*</span>
            </label>
            <input class="input-text required" id="lastname" type="text" name="lastname" value="" maxlength="500" autocomplete="off">
          </div>

          <div class="form-row required">
            <label for="signup-email" style="display:none;">Email</label>
            <input class="header-signup-email" type="text" id="signup-email-header" name="signup-email" value="" placeholder="Email" />
          </div>
          <div class="form-row text-center">
            <input type="submit" name="signup-submit" id="signup-submit" class="subscribe-submit" value="Submit" />
          </div>
        </form>

        <div id="thank-you">
          <p>Thanks for subscribing!</p>
        </div>
      </div>
    </div>
  </div>
</div>

So how does it work?

The method is actually quite simple.

The on('submit', function(){}) event binds a function to the form submit. So when we hit submit button our function gets fired.

Inside this function we have this content

var empty = $(this).find("input, select, textarea").filter(function() {
  return this.value === "";
});

if (empty.length <= 0) {
  $signupForm.hide();
  $formReplace.show();
} else {
  return false;
}

This line

var empty = $(this).find("input, select, textarea").filter(function() {
  return this.value === "";
});

assignes to variable empty all input, select and textarea fields that does not have any value, ergo they are empty.

Next we check the length of empty variable whioch tells us how many are there empty fields.

If it equals or is less than 0 it means that there are no empty fields so we can submit our form.

If not (it is higher than 0) it means that there are still empty fields, so we return false ergo nothing happens.