How to run form validation before embedded stripe checkout form pops up?

Question

Hi I have a form in ruby on rails which uses the stripe embeeded checkout button to make payments.

I currently am using jquery for my validation and have my validation code listening for a click on the stripe checkout button, but am having trouble getting the form to validate itself before the popup appears. What I would like to do is after clicking the stripe pay now button, have the form validation run FIRST on the entire form and then proceed with the stripe popup. As it is now, the form validates the first input field and then immediately follows with the stripe popup. I'm stuck and not really sure how to correct this.

Here is my form.

<%= form_tag(charge_path , :method => 'post', :id => 'newOrder') do %>
    <div class="cwell">
      <h5>Billing Information</h5>
        <div class="form-group">
          <div class="row">
            <div class="col-md-6">
              <%= label_tag :name, "Name" %>
              <%= text_field_tag :name, nil, class: "form-control" %>
              <div class="error_message" id="errorname" style="color:red;">Please enter your name</div>
            </div>
            <div class="col-md-6" email>
              <%= label_tag :email, "Email" %>
              <%= email_field_tag :email, nil, class: "form-control" %>
              <div class="error_message" id="erroremail" style="color:red;">Please enter a valid email address</div>
            </div>
          </div>
      </div>
      <div class="form-group">
        <div class="row">
          <div class="col-md-8">
            <%= label_tag :address, "Address" %>
            <%= text_field_tag :address, nil, class: "form-control" %>
            <div class="error_message" id="erroraddress" style="color:red;">Please enter an address</div>
          </div>
          <div class="col-md-4">
            <%= label_tag :city, "City" %>
            <%= text_field_tag :city, nil, class: "form-control" %>
            <div class="error_message" id="errorcity" style="color:red;">Please enter a city</div>
          </div>
        </div>
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-md-4">
            <%= label_tag :state, "State" %>
            <%= text_field_tag :state, nil, class: "form-control" %>
            <div class="error_message" id="errorstate" style="color:red;">Please enter your state</div>
        </div>
        <div class="col-md-4">
            <%= label_tag :zip, "Zipcode" %>
            <%= text_field_tag :zip, nil, class: "form-control" %>
            <div class="error_message" id="errorzip" style="color:red;">Please enter a zipcode</div>
        </div>
        <div class="col-md-4">
            <%= label_tag :phone, "Phone" %>
            <%= telephone_field_tag :phone, nil, class: "form-control" %>
            <div class="error_message" id="errorphone" style="color:red;">Please enter a phone number</div>
        </div>
      </div>
    </div>
  </div>
 <% end %>

And my validation script

script.js

 $('.error_message').hide();
 $('.stripe-button-el').click(function(e) {
    e.preventDefault();
    var name = $('input#name').val();
    if (name == "") {
      $('.error_message').hide();
      $('div#errorname').show();
      $('input#name').focus();
      return false;
    }

    var email = $('input#email').val();
    var re = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (email == "" || !re.test(email)) {
      $('.error_message').hide();
      $('div#erroremail').show();
      $('input#email').focus();
      return false;
    }

    var phone = $('input#phone').val();
    if (phone == "") {
      $('.error_message').hide();
      $('div#errorphone').show();
      $('input#phone').focus();
      return false;
    }

    var address = $('input#address').val();
    if (address == "") {
      $('.error_message').hide();
      $('div#erroraddress').show();
      $('input#address').focus();
      return false;
    }

    var state = $('input#state').val();
    if (state == "") {
      $('.error_message').hide();
      $('div#errorstate').show();
      $('input#state').focus();
      return false;
    }

    var city = $('input#city').val();
    if (city == "") {
      $('.error_message').hide();
      $('div#errorcity').show();
      $('input#city').focus();
      return false;
    }

    var zip = $('input#zip').val();
    if (zip == "") {
      $('.error_message').hide();
      $('div#errorzip').show();
      $('input#zip').focus();
      return false;
    }
});