我有一个基础表单，使用数据存储来验证某些字段。我正在使用Stripe的结账来支付调用javascript。
我遇到的问题是基础数据遵循验证被忽略，Stripe结帐窗口正在启动。
我希望在启动条带检出之前表单有效。
我认为这与按钮类型必须是按钮而不是提交有关。
这非常吸引我的知识，所以我感谢你的耐心等待。
非常感谢，
约翰
以下是表格：
<form action="#" name="form" method="post" data-abide>
<input type="hidden" name="membership_type" value="<?php echo $mem_id; ?>">
<fieldset>
<legend>Principle Contact</legend>
<div class="row">
<div class="large-2 columns">
<div class="input-wrapper">
<label>
Title
<select name="title" required>
<option selected disabled value=''>Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
<option value="Sir">Sir</option>
<option value="Earl">Earl</option>
<option value="Countess">Countess</option>
<option value="Lady">Lady</option>
<option value="Cllr">Cllr</option>
<option value="Dr">Dr</option>
<option value="Lord">Lord</option>
</select>
</label>
<small class="error">Select</small>
</div>
</div>
<div class="large-5 columns">
<div class="input-wrapper">
<label>First Name
<input type="text" name="first_name" required>
</label>
<small class="error">Please input your first name</small>
</div>
</div>
<div class="large-5 columns">
<div class="input-wrapper">
<label>Last Name
<input type="text" name="last_name" required>
</label>
<small class="error">Please input your last name</small>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Known As
<input type="text" name="known_as">
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Address Line 1
<input type="text" name="address_1" required>
</label>
<small class="error">Please input the first line of your address</small>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Address Line 2
<input type="text" name="address_2">
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Address Line 3
<input type="text" name="address_3">
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Town
<input type="text" name="address_4" required>
</label>
<small class="error">Please input your Town</small>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>City
<input type="text" name="address_5" required>
</label>
<small class="error">Please input your City</small>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Post Code
<input type="text" name="post_code" required>
</label>
<small class="error">Please input your Post Code</small>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Home Phone
<input type="tel" id="home_tel" name="home_tel" pattern="(\s*\(?0\d{4}\)?(\s*|-)\d{3}(\s*|-)\d{3}\s*)|(\s*\(?0\d{3}\)?(\s*|-)\d{3}(\s*|-)\d{4}\s*)|(\s*(7|8)(\d{7}|\d{3}(\-|\s{1})\d{4})\s*)" required>
</label>
<small class="error">Please input a valid home telephone number</small>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Mobile
<input type="tel" id="mobile" name="mobile" pattern="^07([\d]{3})[(\D\s)]?[\d]{3}[(\D\s)]?[\d]{3}$" required>
</label>
<small class="error">Please input a valid mobile telephone number</small>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="email-field">
<label>Email Address
<input type="email" id="email" name="email" onchange="grab_email()" required>
</label>
<small class="error">Please input a valid email address</small>
</div>
</div>
<div class="large-6 columns">
<div class="email-confirmation-field">
<label>Confirm Email Address
<input type="email" name="confirm_email" data-equalto="email">
</label>
<small class="error">The email address does not match</small>
</div>
</div>
</div>
<div class="row">
<label style="padding-left: 14px; padding-bottom: 5px;">Date of Birth</label>
<div class="large-2 columns">
<div class="input-wrapper">
<label>
<select name="day_dob" required>
<option selected disabled value=''>Day</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">29</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</label>
<small class="error">Please select a day</small>
</div>
</div>
<div class="large-2 columns">
<div class="input-wrapper">
<label>
<select name="month_dob" required>
<option selected disabled value=''>Month</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
</label>
<small class="error">Please select a month</small>
</div>
</div>
<div class="large-2 columns left">
<div class="input-wrapper">
<label>
<select name="year_dob" required>
<option selected disabled value=''>Year</option>
<?php
for($i = date("Y") - 100; $i < date("Y")+1; $i++){
echo '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</label>
<small class="error">Please select a year</small>
</div>
</div>
</div>
<div class="input-wrapper">
<input id="volunteer" type="checkbox" name="volunteer"><label for="volunteer">We are always looking for members to help out at the club - would you be interested in volunteering?</label>
</div>
</fieldset>
<fieldset>
<legend>Employment/Education Details</legend>
<div class="input-wrapper">
<label>Are you?<br>
<input type="radio" onclick="javascript:employmentCheck();" name="employment_status" value="employed" id="employed" required><label for="employed">Employed</label>
<input type="radio" onclick="javascript:employmentCheck();" name="employment_status" value="self_employed" id="self_employed" required><label for="self_employed">Self Employed</label>
<input type="radio" onclick="javascript:employmentCheck();" name="employment_status" value="student" id="student" required><label for="student">Student</label>
<input type="radio" onclick="javascript:employmentCheck();" name="employment_status" value="other" id="other" required><label for="other">Other</label>
</label>
<small class="error">Please select one of the above</small>
</div>
<div id="college_nus" style="display:none">
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>College or NUS Number
<input type="text" name="college_nus">
</label>
</div>
</div>
</div>
</div>
<div id="employment_details" style="display:none">
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Address
<textarea name="employment_address" rows="4"></textarea>
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>
Occupation
<select name="occupation">
<option selected disabled value=''>Select</option>
<option value="Managerial/Professional">Managerial/Professional</option>
<option value="Technical"> Technical </option>
<option value="Clerical"> Clerical </option>
<option value="Sales"> Sales </option>
<option value="General"> General </option>
</select>
</label>
</div>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Email
<input type="email" name="employement_email">
</label>
</div>
</div>
<div class="large-6 columns">
<div class="input-wrapper">
<label>Employment Phone
<input type="tel" name="employement_phone">
</label>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Payment Information</legend>
<div data-alert class="alert-box secondary">
<strong><h4><?php echo ucwords($mem_title); ?></h4></strong><br>
<strong><h5>Total: £<?php echo $amount; ?></h5></strong>
</div>
</fieldset>
<fieldset>
<legend>Terms and Conditions</legend>
<label>I confirm that I have read and accept the 2016/17 <a style="text-decoration: underline;" href="javascript:void(0)" target="_blank">Terms and Conditions</a> and agree to Henley Rugby Club storing your personal details.<br></label>
<input id="terms" name="terms" value="1" type="checkbox" required>
<label for="terms"></label>
<small class="error">Please accept our terms and conditions</small>
<label><strong>NB</strong> All memberships run from 1st June 2015 to 31st May 2016</label>
</fieldset>
<br>
<input type="button" id="charge-button" class="button radius member_button" value="Continue">
</form>
调用Stripe结帐的javascript就在这里：
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var handler = StripeCheckout.configure({
key: '<?php echo $stripe['publishable_key']; ?>',
image: '/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
$.post("", {token: token, type: 'charge'}, function(res){
if(res.status){
$('form').submit();
}
},"json");
console.log(token);
}
});
</script>
<script>
$('#charge-button').on('click', function(e) {
var userEmail = $('#email').val();
handler.open({
image: '/logo.png',
name: 'Shop.com',
description: 'Product',
email: userEmail,
currency: 'gbp',
amount: 20000
});
e.preventDefault();
});
$(window).on('popstate', function() {
handler.close();
});
</script>