Add translations for all left fields and constraints

Fix the form validation: it was verified by the user browser until now
so the infobulls were always displayed in french "Veuille compléter ce
champ". I disabled the html validation in the template.

src/Form/RegistrationFormType.php

@@ -16,6 +16,7 @@ use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Validator\Constraints\IsTrue;
 use Symfony\Component\Validator\Constraints\Length;
 use Symfony\Component\Validator\Constraints\NotBlank;
+use Symfony\Component\Validator\Constraints\Type;
 
 class RegistrationFormType extends AbstractType
 {
@@ -23,75 +24,68 @@ class RegistrationFormType extends AbstractType
     {
         $builder
             ->add(
-                'email',
-                EmailType::class,
+                'firstName',
+                TextType::class,
                 [
-                    'label' => 'registration.email'
+                    'constraints' => [new NotBlank(['message' => 'firstName.not_blank'])],
+                    'label' => 'registration.firstName'
                 ]
             )
             ->add(
-                'agreeTerms',
-                CheckboxType::class,
+                'lastName',
+                TextType::class,
                 [
-                    'mapped' => false,
-                    'constraints' => [
-                        new IsTrue(['message' => 'You should agree to our terms.']),
-                    ],
-                    'row_attr' => ['class' => 'form-group d-flex flex-row m-auto mb-4 col-6',],
-                    'label' => 'registration.agreeTerms'
+                    'constraints' => [new NotBlank(['message' => 'lastName.not_blank'])],
+                    'label' => 'registration.lastName'
                 ]
             )
             ->add(
-                'plainPassword',
-                RepeatedType::class,
+                'email',
+                EmailType::class,
                 [
-                    // instead of being set onto the object directly,
-                    // this is read and encoded in the controller
+                    'constraints' => [new NotBlank(['message' => 'email.not_blank'])],
+                    'label' => 'registration.email'
+                ]
+            )
+            ->add('plainPassword', RepeatedType::class, [
                 'type' => PasswordType::class,
                 'mapped' => false,
-                    'attr' => ['autocomplete' => 'new-password'],
+                'required' => true,
                 'constraints' => [
-                        new NotBlank([
-                            'message' => 'Please enter a password',
-                        ]),
+                    new NotBlank(['message' => 'password.not_blank']),
                     new Length([
                         'min' => 6,
-                            'minMessage' => 'Your password should be at least {{ limit }} characters',
+                        'minMessage' => 'password.min_characters',
                         // max length allowed by Symfony for security reasons
                         'max' => 4096,
                     ])
                 ],
                 'first_options' => ['label' => 'registration.password.first'],
                 'second_options' => ['label' => 'registration.password.second'],
-                    'invalid_message' => ['label' => 'invalid_message']
-                ]
-            )
-            ->add(
-                'firstName',
-                TextType::class,
-                [
-                    'constraints' => [new NotBlank(['message' => 'Please enter your first name'])],
-                    'label' => 'registration.firstName'
-                    ]
-            )
-            ->add(
-                'lastName',
-                TextType::class,
-                [
-                    'constraints' => [new NotBlank(['message' => 'Please enter your last name'])],
-                    'label' => 'registration.lastName'
-                ]
-            )
+                'invalid_message' => 'invalid_message'
+            ])
             ->add(
                 'captcha',
                 CaptchaType::class,
                 [
                     'label' => 'registration.captcha',
-                    'required' => false,
+                    'required' => true,
                     'reload' => true,
                     'as_url' => true,
                 ]
             )
+            ->add(
+                'agreeTerms',
+                CheckboxType::class,
+                [
+                    'mapped' => false,
+                    'constraints' => [
+                        new IsTrue(['message' => 'agreeTerms']),
+                    ],
+                    'row_attr' => ['class' => 'form-group d-flex flex-row m-auto mb-4 col-6'],
+                    'label' => 'registration.agreeTerms'
+                ]
+            )
             ->add(
                 'submit',
                 SubmitType::class,

templates/registration/register.html.twig

@@ -7,7 +7,7 @@
       <div class="alert alert-danger col-6 mx-auto my-5 h1" role="alert">{{ flashError }}</div>
     {% endfor %}
 
-    {{ form_start(registrationForm, {'attr': {'class': 'd-flex flex-column justify-content-center'}}) }}
+    {{ form_start(registrationForm, {'attr': {novalidate: 'novalidate', 'class': 'd-flex flex-column justify-content-center'}}) }}
     {{ form_row(registrationForm.firstName, {'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-4 col-6'}})  }}
     {{ form_row(registrationForm.lastName, {'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-4 col-6'}}) }}
     {{ form_row(registrationForm.email, {'row_attr': {'class' : 'form-group d-flex flex-column m-auto mb-4 col-6'}}) }}

translations/validators.en.yaml

+firstName:
+  not_blank: Please enter your first name
+
+lastName:
+  not_blank: Please enter your last name
+
+email:
+  not_blank: Please enter your email adress
+
+password:
+  not_blank: Please enter your password
+  min_characters: Your password should be at least {{ limit }} characters
+
+invalid_message: The password fields must match
+
+agreeTerms: You must agree with our terms