jquery - AJAX 客户端验证未正确调用
问题描述
我已经编写了这个 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>
解决方案
推荐阅读
- r - R - 从长到宽重塑时“变化 [,i] 中的错误:维度数不正确”
- database - 图数据库(OrientDB)中基于事件的时间序列数据
- vue.js - 为什么我不能在 VueJS/Vuex 中调用命名空间的 getter?
- php - 如果 (in_array) 似乎没有看到数组中的内容,我做错了什么?
- python - Python列表逆序排序
- django - Django include 语句的行为很奇怪
- javascript - IONIC FRAMEWORK "TypeError: Object(...) is not a function"
- javascript - 将 'hover()' 更改为 'on("vmouseover")',破坏脚本并输出 'undefined'
- javascript - 单选按钮输入不会将值传递给模态
- javascript - 当我通过内联函数调用将对象返回到 ES6/Reactjs 中的另一个对象时出错