Laravel 5.5 阻止在点击 Enter 时提交表单

问题描述

上下文：

• 带有 cartalyst/stripe 的 Laravel 5.5 Stripe 付款表
• BookingController 返回带有与登录用户关联的 PaymentIntent 的视图。

如果用户使用鼠标点击“PAY”，一切正常（错误检查并成功支付）。 但是当他在键盘上点击回车时，表单也会以空值提交。

为了避免虚假预订，控制器上的商店功能如下所示：

public function store(CreditCardRequest $request)
{

    if ($request->payment_method == null) {
        // Empty Card
        return back()->withErrors('empty card')->withinput();
    }

    // ok,process booking
    ...
}

但我也想在前端停止这个 我试过 this 但根本不起作用。 我想不通。

刀片

 {!! Form::open(array('url' => url('/booking'),'method' => 'post','id' => 'payment-form')) !!}
    <script src="https://js.stripe.com/v3/"></script>
    {{ Form::hidden('payment_method','',array('id' => 'payment-method')) }}
    {{ Form::hidden('payment_intent',$pay_intent['id'])}}
    {{ Form::hidden('pax',$pax) }}
    <div class="row col-md-8">
        <h4>{{$pay_intent['id']}}</h4>
        <div class="field">
          <label for="card-number">card number</label>
          <div id="card-number" class="form-control input empty"></div>
          <div class="baseline"></div>
        </div>
        <div class="field half-width">
          <label for="card-expiry">Expire</label>
          <div id="card-expiry" class="form-control input empty"></div>
          <div class="baseline"></div>
        </div>
        <div class="field half-width">
          <label for="card-cvc">CVC</label>
          <div id="card-cvc" class="form-control input empty"></div>
          <div class="baseline"></div>
        </div>
      </div>
      <button type="button" class="mt-5 btn btn-md btn-success" id="payment-button">PAY</button>
      @if (session('error'))
        <div class="alert alert-danger mt-4">{{ session('error') }}</div>
      @endif
      <div class="d-none alert alert-danger mt-4" style="display:none;" id="card-error"></div>
{!! Form::close() !!}

提交时条纹 JS

$('#payment-button').on('click',function() {
    $('#payment-button').attr('disabled',true);

    stripe
        .confirmCardPayment('{{$pay_intent['client_secret']}}',{
            payment_method: {
                card: cardNumber,},})
        .then(function(result) {
            if (result.error) {
                $('#card-error').text(result.error.message).removeClass('d-none');
                $('#card-error').css('display','block');
                $('#payment-button').attr('disabled',false);
            } else {
                $('#payment-method').val(result.paymentIntent.payment_method);
                $('#payment-form').submit();
            }
        });
})

解决方法

抓取您的表单，监听提交并阻止默认操作

$('#payment-form').on('submit',function(e) {
    e.preventDefault()
    
   $('#payment-button').attr('disabled',true);

    stripe
        .confirmCardPayment('{{$pay_intent['client_secret']}}',{
        ...

    .then(function(result) {
            if (result.error) {
                $('#card-error').text(result.error.message).removeClass('d-none');
                $('#card-error').css('display','block');
                $('#payment-button').attr('disabled',false);
            } else {
                $('#payment-method').val(result.paymentIntent.payment_method);
// After succesful validation remove the event listener and submit the form
                $('#payment-form').off('submit');
                $('#payment-form').submit();
            }
        });
})