2_3.md

2.3 Custom initialization

The default include loads the browser library, renders bundle configuration, and initializes queued forms:

{{ include('@SvarohJsFormValidator/javascripts.html.twig') }}

Conceptually, it does the following:

<script src="{{ asset('bundles/svarohjsformvalidator/js/svaroh_js_validator.js') }}" type="text/javascript"></script>
{{ js_validator_config() }}
{{ init_js_validation() }}

The original project generated svaroh_js_validator.js with Assetic. On modern Symfony applications, provide the combined asset from your own build step, or load the files listed in the README in the documented order.

If you want to customize initialization, load the library and config in the layout:

<head>
    <script src="{{ asset('bundles/svarohjsformvalidator/js/svaroh_js_validator.js') }}" type="text/javascript"></script>
    {{ js_validator_config() }}
</head>

Then render form models where you need them:

{{ form(comment) }}
{{ init_js_validation(comment) }}

{{ form(user) }}
{{ init_js_validation(user) }}

init_js_validation() accepts three arguments:

init_js_validation(form = null, onLoad = true, wrapped = true)

• form: By default, all queued forms are processed. Pass a form name or FormView instance to process only one form.
• onLoad: When true, validation models are initialized on document ready. Pass false when you want to initialize them yourself. A model rendered into a document that already finished loading - a form fragment an application fetched and injected after the initial load - is initialized right away, because the document ready event it would otherwise wait for has already been dispatched.
• wrapped: When true, the generated code is wrapped in a <script type="text/javascript">...</script> tag.

Forms loaded after the page

A form fragment the application fetches and injects - a modal that loads its form, a step of a wizard, a single page CRUD - carries the addModel() call the bundle rendered with it, and that call initializes the form as soon as it runs. The default onLoad is enough, there is nothing to pass:

{{ form(user) }}
{{ init_js_validation(user) }}

The one thing the application has to take care of is that the call runs at all. innerHTML does not execute a <script> tag it inserts, so a fragment dropped in that way is rendered without ever being initialized. Insert it with something that runs the scripts it contains - jQuery's .html(), Turbo, or recreating the <script> nodes by hand - and make sure the form is in the document by then, because the model looks its nodes up there.

A render that is taken out of the document again is forgotten the next time the same form is initialized, so reopening a modal does not pile up instances in SvarohJsFormValidator.getFormInstances().

The library has to be loaded and js_validator_config() rendered before any of this, which the layout does once.

Initializing the models yourself

To initialize the queued models at a moment of your own choosing, pass onLoad = false:

{{ form(user) }}

<script type="text/javascript">
    $.ajax({
        // ...
        complete: function() {
            {{ init_js_validation(null, false, false) }}
        }
    });
</script>

In that call:

• null means all queued forms will be rendered.
• The first false disables document-ready initialization.
• The second false prevents an extra <script> wrapper.