Laravel 5.5 阻止表单提交按 Enter

Posted 2023-03-14

【中文标题】Laravel 5.5 阻止表单提交按 Enter

【英文标题】：Laravel 5.5 prevent Form Submit on hitting 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();
            
        );
)

【参考方案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 请求。更新了答案。