"Please fill in this field" instead of custom error message | Symphony 5

Question

Hi, I have a Symfony 5 form with constraints on my fields, my constraints on the length work fine, but the NotBlank is incorrect. I have a "type" and "label" fields and I'm testing the form and the "type" constraints, if I validate the form with "type" empty it displays the default browser message "Please fill in this field" and I Would like to have a custom message defined in the entity for the "NotBlank" constraint.

I think the problem is caused by "required => true" because if I change it to "false" and add "empty_data => ''" it works and I can see my Custom message, but not exactly because in my edit form if I clear the "type" field and validate it it will appear with the following message: Expected parameter type "string" at property path "type" gives "null".

I'm using Symfony 5, Bootstrap 5, here are my entities, my twig form and my FormType.php

entity

/**
     * @ORM\Column(type="string", length=255)
     * @Assert\Length(
     *      min = 2,
     *      max = 50,
     *      minMessage = "Le type doit faire au minimum {{ limit }} caractères",
     *      maxMessage = "Le type doit faire au maximum {{ limit }} caractères"
     * )
     * @Assert\NotBlank(
     *      message = "Le type est un champ obligatoire"
     * )
     */
    private $type;

Tree Form

{{ form_start(form) }}
    <div class="container-card-global mb-5">
        <div class="form-field">
            {{form_label(form.type)}}
            {{form_errors(form.type)}}
            {{form_widget(form.type)}}
        </div>

        <div class="form-field">
            {{form_label(form.description)}}
            {{form_widget(form.description)}}
            {{form_errors(form.description)}}
        </div>

        <div class="form-field">
            {{form_label(form.statut)}}
            {{form_widget(form.statut)}}
        </div>


        <div class="text-center">
            <button class="btn btn-save-global">{{ button_label|default('Valider') }}</button>
        </div>
    </div>
{{ form_end(form) }}

Form type.php

$builder
            ->add('type', TextType::class, [
                'required' => true,
                'label' => 'Type',
            ])

please help!

I looked at some forums and I tried using "novalidate" but it returns the same error message, I really wanted to keep "required => true" and managed to get my custom message "This field cannot be null".

Answer 1

You are confusing server-side errors with front-end errors. When you write required => true it will apply the html attribute required to your input element. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required

This is why you see the default browser error. If you want to try it, you can use F12 to inspect the entered html tags and remove what you need.

Then. If you manage to submit the form (sending data to the server). Symfony will apply its own constraints (your assertions).

This is why your form is displaying errors correctly because you are using this function on every entry of your form form_errors.

But in this case, the error you see is returned from the server. They are not browser errors.

Regardless, keeping required => true is good for UX (User Experience). For a complete user experience, showing only "dynamic" errors is a good thing. It prevents users from being forced to commit before they know they've made a mistake.

But Symfony constraints can also protect what someone can submit so that you never register incomplete data. You can think of it as the "Chinese Wall". One last thing to project your project data.