代码之家 › 专栏 › 技术社区 › Toma Tomov

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

ajax javascript

Toma Tomov · 技术社区 · 7 年前

当我使用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
    })

1 回复 | 直到 7 年前

Quentin 7 年前

让Ajax同步是正确的方法吗?

不支持。不推荐使用来自JS的同步HTTP请求。永远不要使用它们。

您需要:

总是停顿

始终阻止正常的表单提交。

验证输入后,使用Ajax,使用JS重新提交表单(不重复验证)。

预先验证

在输入数据时逐个进行验证。

希望在最后一个字段完成并提交表单之前完成Ajax。

如果Ajax 不是完成后,您要么在不知道Ajax验证结果的情况下冒险提交表单,要么返回到我建议的第一个选项。