Laravel 5.5 防止按 Enter 时提交表单

Question

上下文：

Laravel 5.5 带 cartalyst/stripe
BookingController return 具有与登录用户关联的 PaymentIntent 的视图。

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

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

public function store(CreditCardRequest $request)
{

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

    // ok, process booking
    ...
}

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

Blade

 {!! 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();
            }
        });
})

Answer 1

获取表单，监听提交并阻止默认操作

$('#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();
            }
        });
})

Laravel 5.5 防止按 Enter 时提交表单

Laravel 5.5 prevent Form Submit on hitting Enter

jquery

laravel

stripe-payments

laravel-5

laravel-blade