Question

我已经编写了这个Ajax函数，在这里我为每个输入提供了表单验证，问题是当我按下按钮时它不会检查验证并成功地对所需数据执行post方法，而只是不去客户端验证部分，这就是为什么直接进入我的post方法调用，然后重定向到我各自的redirected_url的原因。我可以知道如何纠正它吗？

$(document).ready(function() {
  $('.btn,.apply1,.btn_mt,.payment').click(function() {
    if (formValidate()) {
      alert('clicked')
      $.ajax({
        method: 'POST',
        url: '/payment',
        data: {
          'card-name': $('#id_card_name').val(),
          'card-number': $('#id_card_number').val(),
          'card-ex-month': $('#id_card_expiry').val(),
          'card-security-code': $('#id_security_code').val(),
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
        success: function(response) {
          console.log(response);
          alert(response.card);
          var res = $.parseJSON(response);
          if (res.data.card.status == "succeeded") {
            window.location = res.redirect_url
          }
        }
      })
    }
  })
})

function formValidate() {
  alert('in')
  var isValid = true;
  if ($('#id_card_name').val() == "") {
    isValid = false
    $('#lcredit-card-paypal').html('Please Enter Name On Card')
  } else {
    if (!(/^[a-z][a-z\s]*$/.test($('#id_card_name').val()))) {
      isValid = false;
      $('#credit-card-paypal').html('Please Enter Valid Name On Card')
    }
  }
  if ($('#id_card_number').val() == "") {
    isValid = false
    $('#credit-card-paypal').html('Please Enter Number On Card')
  } else {
    if (!(/^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/.test($('#id_card_name').val()))) {
      isValid = false;
      $('#credit-card-paypal').html('Please Enter Valid Number On Card')
    }
  }
  if ($('#id_card_expiry').val() == "") {
    isValid = false
    $('#credit-card-paypal').html('Please Enter Expiry Month & Year')
  } else {
    if (!(/^\d{2}\/\d{4}$/.test($('#id_card_expiry').val()))) {
      isValid = false;
      $('#credit-card-paypal').html('Please Enter Valid xpiry Month & Year')
    }
  }


  if ($('#id_security_code').val() == '') {
    isValid = false
    $('#credit-card-paypal').html('Please Enter PSecurity Code')
  } else {
    if (!(/^[0-9]{3,4}$/.test($('#id_security_code').val()))) {
      isValid = false;
      $('#credit-card-paypal').html('Please Enter Valid Expiry Month & Year')
    }
  }
  return isValid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/payment" method="post">
  <div id="credit-card-paypal"></div>
  <div class="col-md-4 col-sm-6 col-xs-6 input_mb">
    <label>Name on Card</label>
    <input id="id_card_name" class="form-control" name="fields[]" type="text" placeholder="Full name as display on card">
  </div>

  <div class="col-md-4 col-sm-6 col-xs-6 input_mb">
    <label>Credit Card Number</label>
    <input id="id_card_number" class="form-control" name="fields[]" type="text" placeholder="Enter Card Number">
  </div>

  <div class="col-md-4 col-sm-6 col-xs-6 input_mb">
    <label>Expiry</label>
    <input id="id_card_expiry" class="form-control" name="fields[]" type="text" placeholder="Ex: 06/2023">
  </div>

  <div class="col-md-4 col-sm-6 col-xs-6 input_mb">
    <label>Security Code</label>
    <input id="id_security_code" class="form-control" name="fields[]" type="text" placeholder="Ex: XXX8">
  </div>

  <div class="col-md-4 col-sm-m col-xs-6 input_mb">
    <button class="btn apply1 btn_mt payment" type="button">PAY $139</button>
  </div>

</form>

AJAX客户端验证未正确调用

0 个答案: