javascript - 使用ajax提交时忽略表单验证

Question

我的页面中有这个 javascript 函数。

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="InfiStallStock"){
            $(".e-stock-saldo-box").hide();
            $(".InfiStall ul li .infistallLocation").attr('required');              
            $(".Delivery ul input:radio").removeAttr('required');
            $(".Delivery ul input:text").removeAttr('required');
            $(".InfiStall").show();
        }
        if($(this).attr("value")=="DeliveryStock"){
            $(".e-stock-saldo-box").hide();
            $(".InfiStall ul li .infistallLocation").removeAttr('required');
            $(".Delivery ul li input:radio").attr('required');
            $(".Delivery ul input:text").attr('required');
            $(".Delivery").show();
        }
    });
});  


            function enableList(element) {
                var select = document.getElementById("select"+element.id.substring(element.id.length-9));
                enableSubmit();
                showUp();                    
                if(element.checked === true){
                    select.disabled = false;
                    checkSelect(select);
                }else{
                    select.disabled = true;
                    select.selectedIndex = 0;
                }
            }
            function checkSelect(element){
                if(!validate_select(element)){
                    element.setCustomValidity("Pilih Jumlah Estock");
                }else{
                    element.setCustomValidity("");
                }
            }

此 javascript 用于检查用户选择了哪个选项。如果用户选择一个选项，则另一个需要输入的选项将被忽略/删除，反之亦然。

如果我直接使用像 <form action="submit.php"/> 这样的表单操作提交表单，javascript 在验证表单方面工作得很好.

但是，当我更改现在使用 ajax 提交它的方式时，验证将被忽略。

这是提交表单的ajax脚本:

$('#btn_submit').on('click', function(e) {
    e.preventDefault();

    var esquantity = $('.row_selected select').map(function() { return $(this).val(); }).get().join('|');
    var size = $('.row_selected td.size span').map(function() { return $(this).text(); }).get().join('|');

    $.ajax(
    {
        type: "POST",
        url: "../ajax.php",
        data: 'esquantity='+esquantity+ '&size='+ size,
        cache: false,
        success:function(html)
        {
            alert("Succes " + html);
        }
    });

谁能帮我解决这个问题，这样即使我用 ajax 提交，这个表单也会有一些验证。谢谢!

Answer 1

尝试-

在普通按钮而不是提交按钮上编写下面的事件

$('#btn_submit').on('click', function(e) {

这将要求您不要调用

e.preventDefault();

在函数中，然后您可以做的是在 ajax 调用的回调区域中显式调用 submit() 函数，即

success:function(html)
{
    // call submit function explicitly it should validate all your constraints then
}