FpJsFormValidatorBundle

FpJsFormValidatorBundle converts Symfony form validation metadata into JavaScript validation rules and attaches client-side validators to rendered forms.

Status

This branch has been revived for the current PHP/Symfony baseline:

• PHP 8.4+ runtime support; CI currently verifies PHP 8.4, 8.5, and 8.6 nightly
• Symfony 8.x components as declared in composer.json
• Twig 3
• PHPUnit 13
• PHPStan static analysis
• PHP and JavaScript coverage thresholds
• PSR-4 autoloading from src/

The old Symfony 2/3 + Assetic + Selenium test application was replaced upstream by a newer Tests/app fixture. The maintained test commands now cover the PHP model/factory/controller core, JavaScript constraints, and a Cypress smoke test against the Symfony test application.

For older Symfony applications, use the historical branches:

• Symfony 5.4, 6.4, or 7.x: 1.7
• Symfony 4: 1.6
• Symfony 3.1: 1.5
• Symfony 3.0: 1.4
• Symfony 2.8 or 2.7: 1.3
• Symfony 2.6 or older: 1.2

Installation

Install the bundle with Composer:

composer require fp/jsformvalidator-bundle

If you are testing this revived branch before a tagged release, require the development branch explicitly:

composer require fp/jsformvalidator-bundle:"dev-master"

Register the bundle in config/bundles.php:

<?php

return [
    // ...
    Fp\JsFormValidatorBundle\FpJsFormValidatorBundle::class => ['all' => true],
];

Configuration

Validation is enabled for every form by default. You can disable it globally:

# config/packages/fp_js_form_validator.yaml
fp_js_form_validator:
    js_validation: false

Per-form and per-field disabling is documented in Disabling validation.

UniqueEntity Route

If you use Symfony's Doctrine UniqueEntity constraint, import the bundle route:

# config/routes/fp_js_form_validator.yaml
fp_js_form_validator:
    resource: '@FpJsFormValidatorBundle/Resources/config/routing.yaml'
    prefix: /fp_js_form_validator

Make sure your security configuration allows requests to this route.

JavaScript Assets

There are two common ways to load the JavaScript files.

Add an Encore Entry

Encore
    // ...
    .addEntry('app', './assets/js/app.js')
+   .addEntry(
+       'FpJsFormValidator',
+       './vendor/fp/jsformvalidator-bundle/src/Resources/public/js/FpJsFormValidatorWithJqueryInit.js'
+   )
    // ...
;

Then include the entry in your template:

{{ encore_entry_script_tags('FpJsFormValidator') }}
{{ encore_entry_script_tags('app') }}

Import From Your Main JavaScript

 import $ from 'jquery';
+import '../vendor/fp/jsformvalidator-bundle/src/Resources/public/js/FpJsFormValidator';
+import '../vendor/fp/jsformvalidator-bundle/src/Resources/public/js/jquery.fpjsformvalidator';

Adjust the import path to your application structure.

Render Bundle Config And Form Models

After the scripts are loaded, render the generated config and queued form models:

{{ js_validator_config() }}
{{ init_js_validation() }}

If you need manual initialization for a specific form or event, see manual initialization.

Usage

After the bundle is registered, the form extension adds every enabled root form to an internal queue. Calling init_js_validation() renders JavaScript models for the queued forms:

{{ form_start(form) }}
    {{ form_widget(form) }}
{{ form_end(form) }}

{{ init_js_validation(form) }}

You can pass false as the second argument to avoid automatic initialization on page load:

{{ init_js_validation(form, false) }}

Documentation

1. Disabling validation
2. Forms in sub-requests
3. Manual initialization

Customization

This bundle finds related DOM elements for each Symfony form element and attaches an object validator to them. The validator contains the properties and methods that define the validation process for that form element.

If your form rendering is customized, start with custom rendering notes.

1. Disable validation for a specified field
2. Error display
3. Get validation groups from a closure
4. Getters validation
5. The Callback constraint
6. The Choice constraint callback
7. Custom constraints
8. Custom data transformers
9. Checking entity uniqueness
10. Form submit by JavaScript
11. onValidate callback
12. Run validation on custom event
13. Collections validation

Development

The recommended development environment is the Nix shell:

nix develop

It provides the latest PHP available in the pinned nixpkgs input, currently PHP 8.5, with Xdebug coverage support, Composer, Node.js 22, npm, zip/unzip, and Cypress runtime libraries. If flakes are not enabled globally, prefix Nix commands with nix --extra-experimental-features "nix-command flakes".

For a fresh checkout:

composer update
npm install

If Cypress reports a missing binary, install it into the local cache:

npx cypress install

You can also run commands without entering the shell:

nix develop -c composer test
nix develop -c npm test

Without Nix, install PHP 8.4 or newer, Composer, Node.js 22, npm, and the Cypress system dependencies locally before running the same commands.

To install vendors via Docker instead of host PHP/Composer:

docker compose build php-fpm
docker compose run --rm --no-deps -u "$(id -u):$(id -g)" php-fpm composer update
docker compose run --rm --no-deps -u "$(id -u):$(id -g)" php-fpm npm install

Install or refresh Composer dependencies:

composer update

Run the PHP test suite:

composer test

Run PHPStan static analysis:

composer phpstan

Run PHP coverage:

composer coverage

Run the JavaScript unit tests and Cypress browser smoke test:

npm test

Run JavaScript coverage:

npm run test:coverage

Useful local checks:

composer validate --strict
git diff --check

The same maintained test, static-analysis, and coverage checks are also run by GitHub Actions on pushes and pull requests. Coverage runs generate Cobertura reports and upload them to GitHub Code Quality when workflow permissions allow.

The Docker stack uses PHP 8.5, Composer 2, and Node.js 22. It is maintained for dependency installation and ad hoc local commands; Nix remains the preferred environment for exact local parity with the documented checks.