ActiveForm: как запретить отправку формы после успешной ajax валидации?

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
rommcr
Сообщения: 128
Зарегистрирован: 2014.12.24, 16:35

ActiveForm: как запретить отправку формы после успешной ajax валидации?

Сообщение rommcr »

Суть в чем:

есть форма многоразового использования. Данные из неё нужно сохранять в базе, не покидая страницы, предварительно валидировав и показав ошибки.

Решил оставить валидацию только ajax, по событию submit. Идея в том, что на стороне сервера при ajax запросе и валидации без ошибок запись будет автоматически сохранена в БД, а JS, получив ответ о корректной валидации, будет знать, что данные сохранены, выдаст соответствующее сообщение и будет готов к приему новых данных.

Так вот, как не дать yiiActiveForm засабмитить форму? Пробовал повесить обработчик на событие submit формы, проверяя

Код: Выделить всё

$('#Enquire').on('submit', function(){
var data = $(this).data('yiiActiveForm')
if (data.submitting && data.validated) {
 //  здесь движок пытается отправить уже валидированные данные.
}
});
Если просто вернуть false - то при следующем сабмите формы уже никакой валидации не происходит, форма отправляется напрямую.
Если установить data.submitting = data.validated = false, то форма сабмитится нон-стоп.

Как победить?
Аватара пользователя
yiijeka
Сообщения: 3103
Зарегистрирован: 2012.01.28, 09:14
Откуда: Беларусь
Контактная информация:

Re: ActiveForm: как запретить отправку формы после успешной ajax валидации?

Сообщение yiijeka »

Добавьте две строчки

Код: Выделить всё

$("#my-form").on("submit", function(event, jqXHR, settings) {
                                                
                        event.preventDefault(); // 1
                        event.stopImmediatePropagation(); // 2
                        
                        var form = $(this);
                        
                        var formData = new FormData($(this)[0]); // submit with upload files

                        $.ajax({
                            url: form.attr("action"),
                            type: "post",
                            data:  formData,
                            contentType: false,
                            cache: false,
                            processData:false,
                            success: function(data) {
                             
                            },
                            error:  function(jqXHR, textStatus, errorThrown ) {
                             
                            }
                        });

                        return false;
                    }); 
rommcr
Сообщения: 128
Зарегистрирован: 2014.12.24, 16:35

Re: ActiveForm: как запретить отправку формы после успешной ajax валидации?

Сообщение rommcr »

Спасибо, в совокупности с переопределении data.validated = false это работает, как и ожидалось.
NESTA13
Сообщения: 8
Зарегистрирован: 2017.06.08, 14:26

Re: ActiveForm: как запретить отправку формы после успешной ajax валидации?

Сообщение NESTA13 »

Здравствуйте, форумчане! Вроде бы нашёл подходящую тему, со сложившейся ситуацией здесь.
Суть проблемы следующая. Установил на мультиязычный сайт этот виджет обратного звонка: https://github.com/qwertyrrr/yii2-callback
Отредактировал его, потому что говновиджет ещё тот.
На русской версии сайта форма обратного звонка отрабатывает отлично. Переключаюсь на английскую версию, в url появляется uri сегмент en.
Пробую отправить запрос обратного звонка, заполнив корректно все соответствующие поля - страница перезагружается, т.е. форма отправляется (хотя этого не должно происходить) и в итоге перекидывает на страницу: /en/admin/callback/callback/create-ajax. На которой я вижу одну строку:
{"name":["Fill the Your name field"],"phone":["Fill the your phone number field"],"message":["Fill the Message field"],"time":["Fill the Time to call: field"]}.
Естественно никакие данные не отправляются.

Вопрос: как сделать чтобы запрос обратного звонка отправлялся ajax, как это и предусмотрено виджетом, и при этом страница не перезагружалась.

Для запрета отправки формы в js виджета прописал:

Код: Выделить всё

        $('#callback-form').on('submit', function(e){
            alert('dfdfdf');
            e.preventDefault();
        });
Алерт отрабатывает и на русской версии и на английской, но при этом на русской версии сайта всё отлично, а на английской нет.

Что я только не перепробовал:
и

Код: Выделить всё

 event.stopImmediatePropagation(); 
и кнопку submit менял на button (тогда вообще всё перестаёт работать, проблема остаётся - страница не перезагружается, но данные просто не отправляются).

и очерёдность подключения скриптов и их содержание на en и ru проверял

даже в ядро интернационализации движка залазил. Толку никакого- всё то же. Два дня просидел, ещё с одним программистом, не можем даже уже предположить в чём причина.
Идиотизм какой-то. Секретные материалы....

В консоли ошибок нет. Все скрипты корректно подключаются.

P/S/: заметил так же проблемы в работе некоторых других виджетов на другом мультиязычном сайте. Такая же проблема с виджетом датапикер на английской версии - календарь вообще не открывается ,при этом так же ошибок нет, все скрипты подключены в штатном режиме.

Может кто-то сталкивался с подобной хренью (выразился бы ещё не так, но цензура), подскажите ,пожалуйста, в чём может быть причина, или хотя бы какие-то предположения выскажите куда копать.
Спасибо!
Александр
Ответить