引导模式

Question

我为我的信用卡付款表单创建了bootstrap模式，我想在jquery中使用基本验证来验证信用卡表单。

<script>
$(function() {
$('#error_message_reg').text("");
//$( "submitBtnRegister" ).click(function() {
$('#register_form').on('submit', function()  {
 //e.preventDefault();
var error=false; 
var firstName = $('#payment_first_name').val();
var lastName = $('#payment_last_name').val();
var adress = $('#payment_address').val();
var city = $('#payment_city').val();
var state = $('#payment_state').val();
var zip = $('#payment_zip').val();
var country = $('#payment_country').val();
var cc_no = $('#payment_card_no').val();
var cc_month = $('#payment_card_expiry_month').val();
var cc_year = $('#payment_card_expiry_year').val();
var cc_ccv = $('#payment_card_ccv').val();
var postal_code = $('#payment_card_postal_code').val();






if(firstName == null || firstName == "") {
            $('#error_message_reg').text("FIrst name is required");
            var error=true;
            return false;
        }



if(lastName == null || lastName == "") {
            $('#error_message_reg').text("Last name is required.");
            var error=true;
            return false;
        }
if(adress == null || adress == "") {
            $('#error_message_reg').text("Adress is required.");
            var error=true;
            return false;
        }
if(city == null || city == "") {
            $('#error_message_reg').text("City is required.");
            var error=true;
            return false;
        }
if(state == null || state == "") {
            $('#error_message_reg').text("state is required.");
            var error=true;
            return false;
        }
if(zip == null || zip == "") {
            $('#error_message_reg').text("Zip is required.");
            var error=true;
            return false;
        }
if(country == null || country == "") {
            $('#error_message_reg').text("country is required.");
            var error=true;
            return false;
        }
if(cc_no == null || cc_no == "") {
            $('#error_message_reg').text("Card number is required.");
            var error=true;
            return false;
        }
if(cc_month == null || cc_month == "") {
            $('#error_message_reg').text("expiry month is required.");
            var error=true;
            return false;
        }
if(cc_year == null || cc_year == "") {
            $('#error_message_reg').text("expiry year is required.");
            var error=true;
            return false;
        }
if(cc_ccv == null || cc_ccv == "") {
            $('#error_message_reg').text("CVV is required.");
            var error=true;
            return false;
        }
if(postal_code == null || postal_code == "") {
            $('#error_message_reg').text("postal code is required.");
            var error=true;
            return false;
        }
if(error==false)
{
        $('#error_message_reg').text("");
        $('#register_form').submit();

}
});
});
</script>

我想添加信用卡验证也就像这张卡有效。 我使用braintree作为我的支付网关我可以使用$result->errors->deepAll()来检查有效交易 但是当我提交表单时，模态会被关闭。有什么方法可以防止关闭模态，直到braintree的响应来了。 是否可以在不使用ajax的情况下执行此操作。

提前感谢

Answer 1

如果页面刷新模式将被关闭，则无法在没有页面刷新的情况下进行服务器端验证（因为您已经没有使用过AJAX）。

或者我们需要通过验证卡片在URL中传递一些参数来重新打开页面提交模式。

    <?php if(invalid card): ?>
<script>
reopen the modal with parameters posted
</script>
<?php endif; ?>

我建议使用AJAX将是最好的方法。在代码的底部，您可以添加

if(error==false)
{

$.post( "url to do server side validation", $("#register_form").serialize())
  .done(function( data ) {    //Better to have JSON as response
if(data.success === true)
{
    $('#error_message_reg').text("");
        $('#register_form').submit();
}
else
{
    $('#error_message_reg').text("error from response");
    return false;
}
  });

}