在解析之前处理ajax表单上的验证错误?

时间:2015-12-04 08:47:21

标签: javascript jquery ajax promise

我有一个页面,提交2个不同的用户/成员表单,将它们添加到一个组中,然后使用条带来支付会员资格。

我想确保如果第一个用户在第二个用户表单尝试发布之前处理验证错误时验证错误,并且在处理付款之前与第二个用户同样如此。

我创建了一个函数来提交带有ajax的表单,并且它有一定的检查。我确保表单存在而不是禁用。我尝试检查这里是否存在错误,因此可以在继续之前修复它们,但它不起作用。然后我通过ajax发布数据。在解决/完成状态下,当前它从响应中获取验证错误并通过另一个函数将它们传递给表单。这是提交表单功能:

function submitFormAjax(data) {
    if (data.length && $('.error-message').length === 0) {
        var formId = data.attr('id');
        if ( $('#'+formId ).hasClass('disabled') ) {
            console.log('form is disabled don\'t post data');
        } else {
            return $.ajax({
                type: data.attr('method'),
                url: data.attr('action'),
                data: data.serialize(),
                beforeSend: function(xhr) {
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                }
            })
            .done( function( response ) {
                addFormErrors(formId, response);
            })
            .fail(function( response ) {
                console.log( response );
            });
        }
    }
}

理想情况下,我希望能够在表单的状态被认为已解决/完成之前处理这些验证错误,以便按顺序添加用户。我按顺序需要它们,以便首先添加主(第一个用户)帐户,然后将第二个用户关联或分组到该用户。

我正在使用承诺类型链,并且在发布之前还尝试检查验证错误,但也无济于事。

这是承诺链函数:

function submitAllForms() {
    // wait until both of the other forms' data are submitted
    $.when( 
        function() {
            if ($('.error-message').length) {
                alert('Waiting for validation errors to be fixed.');
            } else {
                submitFormAjax($('#userForm'));
            }
        }, 
        function() {
            if ($('.error-message').length) {
                alert('Waiting for validation errors to be fixed.');
            } else {
                submitFormAjax($('#secondUserForm'));
            }
        }).then(
        function() {
            if ( $('.error-message').length ) {
                $form.find('button').prop('disabled', false);
            } else {
                $('#payment-form').get(0).submit();
            }
    });
}

0 个答案:

没有答案