How do I run a form validation before the inline bar's popup form pops up?

Hi, I have a ruby-on-rails mold that uses a strip pour button to make payments.

I am currently using jquery for my validation and have validation code that listens for a click on a strip validation button, but I am unable to get the form to validate itself before the popup appears. What I would like to do is click the Remove Salary Now button, validate the FIRST form on the entire form, and then continue with the popup. As it is now, the form validates the first input field and then the popup appears immediately. I am stuck and not really sure how to fix 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 check 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;
    }
});