yiiactiveform.js валидация вручную

[louisvuitton]

Здратути,

Хочу перед отправкой формы, если она прошла валидацию, вывести модальное окно (с суммарной инфой по заполненным полям и дополнительной кнопкой подтверждения отправки).

Пробую делать так:

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

        $('#submit-order').on('click', function(e) {
            e.preventDefault();

            $('#form-order').data('yiiActiveForm').submitting = true;
            $('#form-order').yiiActiveForm('validate');
          
            $('#submit-order').on('afterValidate', function (e) {
                
                var validated = true;
                var fgroups = $('#form-order > .form-group');
                
                fgroups.each(function(i, el) {
                    if($(el).hasClass('has-error')) {
                        validated = false;
                    }
                });
                
                if(validated) {
                     console.log('validated');
                     $('#modal-result').modal('show');
                }
                else {
                    return false;
                }
            }); 

форма (id="form-order"), кнопка открытия модалки (id="submit-order"), модалка (id="modal-result")

Проверяю прошла ли форма валидацию отсутсвием классов has-error у полей формы.

Проблема такая - если я не ставлю $('#form-order').data('yiiActiveForm').submitting = true; то если нажать кнопку сразу после загрузки страницы(не трогая поля формы) валидация не запускается. А если ставить submitting то форма тут же отправляется (если валидация прошла успешно). А мне надо отправлять по нажатию дополнительной кнопки в модалке.

В форме включена клиентская валидация а кнопка #submit-order type="button" а не type="submit".

Как сделать правильно, подскажите товарищи

[Onotole]

Можно же проверить через событие afterValidate

[louisvuitton]

Спс, проверку переделаю, но как быть с сабмитом? Если не сабмитить валидация не делается =[

[SiZE]

так beforeSubmit юзай, возвращай там false. И submitForm запускай из модалки

[louisvuitton]

Можно поподробней плз
Я всю ночь сегодня комбинировал эти beforeSubmit, afterValidate и т.д., но ни фига не работает как надо!...

А надо чтобы: если поля не валидны - просто показывались ошибки, если все ок - открывалась модалка и при клике по кнопке в модалке отправлялась форма (аяксом).

Проблема в том, что если где-то перехватывать submit или делать кнопкой без сабмита - форма или не валидируется или не отправляется вообще даже вручную. Если submit не трогать - отправляется моментально несмотря на модалку.
Почему в yii не сделали метод позволяющий просто проверить поля формы и вернуть true\false без сабмита, для меня осталось загадкой.

[Onotole]

В afterValidate смотрите, есть ли ошибки. Если нет, показываете модальку. А там уже оперируйте с вашей формой как угодно, валидация же прошла

[louisvuitton]

Onotole, а как запустить validate(и соответственно afterValidate) без сабмита?

делаю так:

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

     // Кнопка показа модалки 
        $('#show-modal-order').on('click', function (e) {
            e.preventDefault();
            $('#form-order').yiiActiveForm('validate', true);  //т.к. кнопка type="button", а не "submit" валидацию надо запускать вручную и почему-то обязательно с параметром forceSubmit = true.  НО с этим параметром, сразу по нажатию на кнопку, происходит отправка формы. (Точно также  происходит, если сделать кнопку type="submit" и вообще убрать обработчик нажатия этой кнопки) 
        });
        
        
        // afterValidate
        $('#form-order').on('afterValidate', function (e, m, eattr) {
                e.preventDefault();
                if(eattr.length > 0) {
                    $('html, body').animate({
                        scrollTop: ($('.has-error').first().offset().top)
                    }, 250);
                }
                else {
                    console.log('validated');
                    $('#modal-order').modal('show').one('click', '#submit-order', function() {
                        $('#form-order').trigger('submit');   //показ модалки и навешивание отправки формы на #submit-order
                     });
                }
        });
        
        
        // перехват submit т.к. нужно отправлять форму аяксом
        $('#form-order').on('submit', function(e) {
             e.preventDefault();
             console.log('#form-order submitted');
        });
        
        
        // Если остановить submit в beforeSubmit
        $('#form-order').on('beforeSubmit', function(e) {
               e.preventDefault();
        retutn false;
           });
        // то тогда форма не отправляется даже по нажатию кнопки отправки из модалки.

#form-order - форма
#show-order-modal - кнопка показа модалки
#modal-order - модалка
#submit-order - кнопка отправки формы в модалке


Так как же все таки сгруппировать эти события и проверки

[Onotole]

Юзер заполняет форму. Жмет кнопку сабмита формы. Проверяем в афтервалидате, есть ли ошибки. Если нет, открываем модальку, в которой делаем что нужно и в любом случае возвращаем ложь, чтобы не сабмитить форму. В модальке кнопка, которой либо сабмитим форму синхронно, либо отправляем запрос пиджаком или аяксом, в теле которого передадим форму как есть

[louisvuitton]

В том то и проблема что в afterValidate не прервать submit (или я не знаю как, возврат false ничего не дает)

Посмотрите плз JSBin , я там подготовил форму с модалкой. В секции js негенерированный yii код начинается после двух строк
**************
**************

[SiZE]

так в beforeSubmit йопта.

https://github.com/sizeg/yii2-directory ... orm.js#L62

Писал для себя компонент, для работы с ActiveForm в модальном окне. Если в форме нет ошибок, она отправляется и окно закрывается. Если есть, соответственно выводятся ошибки.