弹出嵌入式条带结帐表单之前如何运行表单验证？

Question

嗨我在轨道上的红宝石上有一个表格，它使用条纹嵌入式结帐按钮进行付款。

我目前正在使用jquery进行验证，并且我的验证代码正在侦听点击条带结帐按钮，但在弹出窗口显示之前无法让表单验证自身。我想要做的是点击条带立即付款按钮，让表单验证在整个表单上运行FIRST然后继续条带弹出。   就像现在一样，表单验证第一个输入字段，然后紧跟条带弹出窗口。我被困住了，并不确定如何纠正这个问题。

这是我的表格。

<%= 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 %>

我的验证脚本

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