javascript - Laravel-Javascript | Laravel即使返回 false 后表单仍会提交

Question

我正在尝试在提交时验证用户，然后在用户通过验证后继续表单提交。我已经编写了验证逻辑并且可以运行，但是如果验证失败时返回 false，表单仍然会提交。

这是有问题的表格

<form method="POST" onsubmit="return verifyUser()" action="/pay_profile/{{$id->id}}" id="payment_form" name="payment_form">
    <div class="col-md-12">
        {{csrf_field()}}
        <div class="form-group">
            <label class="control-label col-md-3" style="text-align: left; margin-left: 10px; font-weight: bold;">Payment Amount:</label>
            <div style="width: 50%" class="input-group col-md-5">
                <input required name="amount" id="amount" type="text" class="form-control" autofocus="true" onfocus="rupee()" onkeyup="amount_in_words({{$id->loan->loan_amount - $id->loan->collected_amount}})" placeholder="Enter Amount..." >
                <span class="input-group-btn">
                    <button id="pay" name="pay" data-target="#stack1" data-toggle="modal" disabled class="btn red" type="button">Pay</button>
                </span>
            </div>
            <div class=" form-group col-md-12" style="color: green; font-weight: bold; font-style: italic; padding-left: 250px; margin-top: 5px;" id="container">
            </div>
        </div>
    </div>
    <div id="stack1" class="modal fade" tabindex="-1" data-width="400">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h4>Enter Password</h4>
                            <p>
                                <input id="password" name="password"  required type="password" class="col-md-12 form-control" autofocus="true"> </p>
                                <p>
                                    <div style="color: red" id="error_pwd"></div>

                                </div>

                            </div>

                        </div>
                        <div class="modal-footer">
                            <a type="resets" style="margin-right: 30px;" data-dismiss="modal" class="btn dark btn-outline">Close</a>
                            <button type="submit" class="btn default btn-lg red">Ok</button>
                        </div>
                    </div>
                </form>

这是 onsubmit 函数

<script type="text/javascript">

    function verifyUser()
    {
        function handleData( responseData ) {
        console.log(responseData);
        if( responseData== 'success')
        {
            document.getElementById("payment_form").submit();
            console.log('success');
            return true;
        }
        else
        {
            console.log('fail');
            document.getElementById('error_pwd').innerHTML="<b>Wrong Password!</b>";
            return false;
        }}
            var verifyPass=document.getElementById('password').value;
            if(!verifyPass || verifyPass.trim().length == 0)
            {
                var verifyPass='fail';
            }

            $.ajax({
                url: '/verify/'+verifyPass,
                success: function ( data, status, XHR ) {
                handleData(data);}
                    });
    }
    </script>

Answer 1

只要返回 false，您无论如何都会提交表单(document.getElementById("payment_form").submit();)。问题的出现是因为 handleData() 是异步执行的。

function verifyUser() {
  function handleData(responseData) {
    if (responseData == 'success') {
      document.getElementById("payment_form").submit();
    } else {
      document.getElementById('error_pwd').innerHTML = "<b>Wrong Password!</b>";
    }
  }
  var verifyPass = document.getElementById('password').value;
  if (verifyPass && verifyPass.trim().length > 0) {
    $.ajax({
      url: '/verify/' + verifyPass,
      success: function(data, status, XHR) {
        handleData(data);
      }
    });
  } else {
      document.getElementById('error_pwd').innerHTML = "<b>No password provided!</b>";
  }
  //Return false to prevent form submition.
  return false;
}