总是停止

Question

当我使用ajax验证表单时如何防止表单提交。问题在于ajax是异步的，实际结果（在我的情况下为false）稍后出现。将Ajax设为sync是正确的方法吗？这是我的代码：

$('#w0').on('beforeSubmit', function(e){
        let loadDate = $('#dstrequest-load_date').val()
        let shippingDate = $('#dstrequest-shipping_date').val()
        let requestId = '".($model->isNewRecord ? 0 : $model->id)."'
        let trucks = $('.container-items_truck').find('.truck-item')
        let ids = []
        let result = true
        $.each(trucks, function(){
            let id = $(this).find('select').first().val()
            if(ids.indexOf(id) === -1)
                ids.push(id)
        })
        $.ajax({
            method: 'post',
            url: '/erp/distribution/dst-vehicle/check-truck-engage-date',
            data: {
                load_date: loadDate,
                shipping_date: shippingDate,
                trucks: ids,
                request_id: requestId
            }
        })
        .done(function(data){
            let selects = $('select[name$=\"[truck_id]\"]')
            $.each(selects, function(){
                let val = $(this).val()
                if(data.indexOf(val) !== -1){
                    $('#w0').yiiActiveForm('updateAttribute', $(this).attr('id'), ['".Yii::t('distribution', 'distributionCore.busy_truck')."'])
                    result = false
                }                   
            })
        })
        .always(function(data){
            let transfer_wrapper = $('.transfer-wrapper')
            $.each(transfer_wrapper, function(){
                if($(this).is(':visible')){
                    let fields = $(this).find('input, select')
                    $.each(fields, function(){                  
                        if($(this).val() == ''){
                            let id = $(this).attr('id')
                            $('#w0').yiiActiveForm('updateAttribute', id, ['" . Yii::t('distribution', 'distributionCore.please_fill_the_field') . "'])
                            result = false
                        }
                    })   
                }
            })      
        })
        // HERE THE RESULT SHOULD BE FALSE BECAUSE OF THE AJAX VALIDATION BUT IT'S TRUE BECAUSE OF THE ASYNC BEHAVIOUR.
        return result
    })

Answer 1

使Ajax同步是正确的方法吗？

不。来自JS的同步HTTP请求已弃用。永远不要使用它们。

您需要：

总是停止

始终阻止正常表单提交。

使用Ajax验证输入后，使用JS重新提交表单（无需重复验证）。

提前验证

输入数据时，逐字段进行验证。

希望最后一个字段完成并提交表单时，Ajax将完成。

到那时，如果Ajax 还没有完成，您要么冒着提交表单的风险，要么不知道Ajax验证的结果，要么退回到我建议的第一个选项。 / p>

如何防止表单通过AJAX验证提交

1 个答案:

总是停止

提前验证