Yii2 validate an ActiveForm with javascript

Question

I have a working Active Form, which can be submitted, and validated via Yii PHP. However, I would like to determine if the form is valid, when clicking a Next button.

I can pass error messages to the user via this:

$("#form").yiiActiveForm("validate", true);

But this function doesn't return anything; I don't know if there are indeed any errors or not. I tried this:

$error_count = document.getElementsByClassName("help-block").length

but this does not work; the errors are counted before the UI has updated. If I press the button again, a second time, then error_count is what I'd expect.

This doesn't seem to do anything:

$("#form").yiiActiveForm("validate");

I also tried this:

$('#form').on('afterValidate', function (event, messages, errorAttributes) {}

But this is only triggered after the fact so I'm not sure what to do.

Any advice would be appreciated.

Why do you need to determine if the form is valid? If you just want to check the values before submitting this should be done by Yii itself as long as you don't explicitly disable client validation. If there is some other action you want to take before submitting form you can use afterValidate or beforeSubmit event that Yii provides instead of default submit event. The beforeSubmit event is triggered only if form passes all validations. — Michal Hynčica
– Michal Hynčica, Commented Dec 6, 2021 at 8:41
Because I've split my form over multiple tabs, where I don't want to allow the user to tap the "Next" button unless there are no errors on the page. — Mr Goobri
– Mr Goobri, Commented Dec 6, 2021 at 9:20
The reason why the UI is not updated when you are counting errors is because you pass true as forceValidate param. It sets submitting flag to true and because of that the validate method uses setTimeout to delay the UI update. Using afterValidate event to count errors should help. The array of attributes with validation error is passed as third parameter to callback for that event so you don't need to count .help-block. — Michal Hynčica
– Michal Hynčica, Commented Dec 6, 2021 at 13:12
That makes sense, thanks. I tried calling without passing true but nothing visibly seemed to happen. Could you share how to use afterValidate? — Mr Goobri
– Mr Goobri, Commented Dec 6, 2021 at 15:40

Michal Hynčica · Accepted Answer · 2021-12-07 08:57:34Z

2

If you need to react to button you simply need to combine both events:

let isNextClicked = false;

$('.next-btn').on('click', function(e) {
    e.preventDefault();
    isNextClicked = true;
    $("#form").yiiActiveForm("validate", true);
});

$('#form').on('afterValidate', function(event, messages, errorAttributes) {
    if (!isNextClicked) {
        //validation wasn't triggered by clicking next
        return;
    }

    // reset the state
    isNextClicked = false;

    if (errorAttributes.length > 0) {
        //there are errors so we won't let user to continue
        //we can also show some alert() here
        return;
    }
    
    // ... code to show the next tab of form ...
});

answered Dec 7, 2021 at 8:57

Michal Hynčica

6,2711 gold badge16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Yii2 validate an ActiveForm with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related