Laravel 5.5 阻止表单提交按 Enter答案

【问题标题】：Laravel 5.5 prevent Form Submit on hitting EnterLaravel 5.5 阻止表单提交按 Enter
【发布时间】：2021-07-30 00:55:31
【问题描述】：

上下文：

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

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

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

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

【问题讨论】：

标签： jquery laravel laravel-5 stripe-payments laravel-blade

【解决方案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();
            }
        });
})

【讨论】：

感谢 NICO，两者都试过了，他们设法阻止了表单提交，但他们实际上使表单无法发送，我无法再处理付款。
啊，是的，刚刚看到您确实想提交表单。以为你只是想发出 ajax 请求。更新了答案。