How can I change error message in Symfony

Question

I create a form and then when I click on submit button, show this error message:

Please select an item in the list.

How can I change this message and style it ( with CSS )?

Entity:

...
    /**
     * @ORM\Column(type="string", length=255)
     * @Assert\NotBlank(message="Hi user, Please select an item")
     */
    private $name;
...

Controller:

...
        public function index(Request $request)
        {
            $form = $this->createForm(MagListType::class);
            $form->handleRequest($request);
            return $this->render('index.html.twig', [
                'form' => $form->createView()
            ]);
        }
...

Form:

...
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('name', EntityType::class,[
                'class' => InsCompareList::class,
                'label' => false,
                'query_builder' => function(EntityRepository $rp){
                return $rp->createQueryBuilder('u')
                    ->orderBy('u.id', 'ASC');
                },
                'choice_label' => 'name',
                'choice_value' => 'id',
                'required' => true,
            ])
            ->add('submit', SubmitType::class, [
                'label' => 'OK'
            ])
        ;
...
}

Answer 1

In order to use custom messages, you have to put 'novalidate' on your HTML form. For example:

With Twig:

  {{ form_start(form, {attr: {novalidate: 'novalidate'}}) }}
  {{ form_widget(form) }}
  {{ form_end(form) }}

Or in your controller:

$form = $this->createForm(MagListType::class, $task, array( //where task is your entity instance
    'attr' => array(
           'novalidate' => 'novalidate'
    )
));

This Stackoverflow answer has more info on how to use novalidate with Symfony. You can also check the docs for more info.

As for the styling, you can use JavaScript to trigger classes, which you can then style in your CSS, like in this example taken from Happier HTML5 Form Validation . You can also take a look at the documentation on MDN and play with the :valid and :invalid selectors.

const inputs = document.querySelectorAll("input, select, textarea");

inputs.forEach(input => {
   input.addEventListener(
      "invalid",
        event => {
          input.classList.add("error");
        },
        false
    );
  });

EDIT: You are probably not seeing your custom message because it comes from server side, the message that you're currently seeing when submitting your form is client-side validation. So you can either place novalidate on your field, or you can override the validation messages on the client side by using setCustomValidity(), as described in this SO post which also contains many useful links. An example using your Form Builder:

 $builder
    ->add('name', EntityType::class,[
          'class' => InsCompareList::class,
          'label' => false,
          [
           'attr' => [
             'oninvalid' => "setCustomValidity('Hi user, Please select an item')"
           ]
          ],

          'query_builder' => function(EntityRepository $rp){
                return $rp->createQueryBuilder('u')
                    ->orderBy('u.id', 'ASC');
                },
              'choice_label' => 'name',
              'choice_value' => 'id',
              'required' => true,
            ])
      ->add('submit', SubmitType::class, [
          'label' => 'OK'
         ]);