How can I extend the error ActiveForm to execute javascript code after validation?

I would like to add/remove some html when an error validation occurs in an ActiveForm

The standard template for me is typical “{label}{input}{hint}{error}” … and that generates a simple input snippet:

<div class="form-group">
    <input type="text" class="form-control">
<span class="text-hint">Hint</span>

But I would like when an input shows an error to add some code

<div class="form-group">
    <input type="text" class="form-control border-danger">
    <div class="form-control-feedback text-danger">
        <i class="icon-cancel-circle2"></i>
<span class="text-hint hidden">Hint</span>
<span class="form-text text-danger">Invalid state helper</span>

So, I’d like:

  1. to add a class for input
  2. to add a div with an icon
  3. to add a class to hint (to hide it)

I have my own ActiveForm and ActiveField classes to override other things, but I don’t know how to tell the form to add this.

I was thinking about using the “afterValidate” (as shown here but I don’t know how to add in my ActiveForm class to have it in all my forms.

Thank you

No @imanilchaudhari … that creates the template with all the code … and I need to change css classes and add HTML code if after validations if fails.

As I explained, I alread have my own ActiveForm and ActiveField extended and I already modified template, init functions, behaviours, etc …