title: Why is my browser preventing me from submitting empty fields ? Symfony
body: <p>I made a form that allows users to register.</p>
  <p>There is one question that asks what language they want to learn. In order to make the question optional I created the new field type to my User entity in Terminal and I specified that it can be <strong>null</strong>.</p>
  <p>But, when I validate the form without answering the optional question, I have this displayed error message : <strong>Please select a valid language.</strong></p>
  <p>Thank you for your help.</p>
  <p><strong>register.html.twig</strong></p>
  <pre><code>{% extends 'base.html.twig' %}
  
  {% block title %}Incris-toi !{% endblock %}
  
  {% block main %}
  
  {{ form_start(userform) }}
  
      &lt;div class=&quot;form container&quot;&gt;
  
          {{ form_errors(userform.email) }}
          {{ form_errors(userform.password) }}
          {{ form_errors(userform.gender) }}
          {{ form_errors(userform.firstname) }}
          {{ form_errors(userform.lastname) }}
          {{ form_errors(userform.birthdate) }}
          {{ form_errors(userform.occupation) }}
          {{ form_errors(userform.nationality) }}
          {{ form_errors(userform.nativelanguage) }}
          {{ form_errors(userform.wishedlanguages) }}
  
          &lt;div class=&quot;formpage&quot;&gt;
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  {{ form_widget(userform.email, {'attr' : {'placeholder' : 'Mon adresse e-mail', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.email, 'Mon adresse e-mail', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  {{ form_widget(userform.password.first, {'attr' : {'placeholder' : 'Mon mot de passe', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.password.first, 'Mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-floating&quot;&gt;
                  {{ form_widget(userform.password.second, {'attr' : {'placeholder' : 'Confirmation de mon mot de passe', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.password.second, 'Confirmation de mon mot de passe', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-checkbox&quot;&gt;
                  {{ form_widget(userform.roles) }}
                  &lt;span class=&quot;checkbox&quot;&gt;&lt;/span&gt;
                  &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button type=&quot;button&quot; class=&quot;next btn btn-lg btn-outline-primary mt-4 d-flex mx-auto&quot;&gt;Je m'inscris&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;formpage&quot;&gt;
              &lt;div class=&quot;mb-3&quot;&gt;
                  &lt;p&gt;Es-tu un homme ou une femme ?&lt;/p&gt;
                  {{ form_widget(userform.gender, {'attr' : {'placeholder' : 'Es-tu un homme ou une femme ?', 'class' : 'form-control'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  {{ form_widget(userform.firstname, {'attr' : {'placeholder' : 'Quel est ton prénom ?', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.firstname, 'Quel est ton prénom ?', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  {{ form_widget(userform.lastname, {'attr' : {'placeholder' : 'Quel est ton nom de famille ?', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.lastname, 'Quel est ton nom de famille ?', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  &lt;p&gt;Quelle est ta date de naissance ?&lt;/p&gt;
                  {{ form_widget(userform.birthdate) }}
              &lt;/div&gt;
              &lt;div class=&quot;d-flex&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto&quot;&gt;&amp;lt;&lt;span class=&quot;previous&quot;&gt;Précédent&lt;/span&gt;&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;next btn btn-lg btn-outline-primary mt-4 d-flex ms-auto&quot;&gt;Suivant&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;formpage&quot;&gt;
              &lt;div class=&quot;form-floating mb-3&quot;&gt;
                  {{ form_widget(userform.occupation, {'attr' : {'placeholder' : 'Quelle est ton occupation (ton métier, tes études…) ?', 'class' : 'form-control'}}) }}
                  {{ form_label(userform.occupation, 'Quelle est ton occupation (ton métier, tes études…) ?', {'label_attr' : {'class' : 'label'}}) }}
              &lt;/div&gt;
              &lt;div class=&quot;mb-3&quot;&gt;
                  &lt;p&gt;De quel pays es-tu originaire ?&lt;/p&gt;
                  {{ form_widget(userform.nationality) }}
              &lt;/div&gt;
              &lt;div class=&quot;mb-3&quot;&gt;
                  &lt;p&gt;Quelle est ta langue maternelle ?&lt;/p&gt;
                  {{ form_widget(userform.nativelanguage) }}
              &lt;/div&gt;
              &lt;div class=&quot;d-flex&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto&quot;&gt;&amp;lt;&lt;span class=&quot;previous&quot;&gt;Précédent&lt;/span&gt;&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;next optional btn btn-lg btn-outline-primary mt-4 d-flex ms-auto&quot;&gt;Suivant&lt;/button&gt;
                  &lt;button class=&quot;btn optional-validation btn-lg btn-outline-primary mt-4 d-flex ms-auto&quot;&gt;Je valide&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;formpage&quot;&gt;
              &lt;div class=&quot;mb-3&quot;&gt;
                  &lt;p&gt;Quelle langue souhaites-tu pratiquer ?&lt;/p&gt;
                  &lt;div class=&quot;wishedlanguagelist&quot;&gt;
                      {{ form_widget(userform.wishedlanguages, {'attr' : {'class' : 'form-control mb-3'}}) }}
                  &lt;/div&gt;
                  &lt;div class=&quot;d-flex justify-content-between&quot;&gt;
                      &lt;button type=&quot;button&quot; class=&quot;question-button btn btn-outline-secondary&quot; id=&quot;addwishedlanguage&quot;&gt;+ Ajouter une langue&lt;/button&gt;
                      &lt;button type=&quot;button&quot; class=&quot;question-button btn btn-outline-secondary&quot; id=&quot;removewishedlanguage&quot;&gt;- Supprimer la dernière langue&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;d-flex&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;prev btn btn-lg btn-outline-secondary mt-4 d-flex align-items-center me-auto&quot;&gt;&amp;lt;&lt;span class=&quot;previous&quot;&gt;Précédent&lt;/span&gt;&lt;/button&gt;
                  {{ form_row(userform.save, {'attr' : {'class' : 'btn btn-lg btn-outline-primary mt-4 d-flex ms-auto'}}) }}
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  {{ form_end(userform) }}
  
  {% endblock %}
  
  {% block js %}
  
  &lt;script src=&quot;../assets/js/scripts.js&quot;&gt;&lt;/script&gt;
  
  {% endblock %}   
  </code></pre>
  <p><strong>UserType.php</strong></p>
  <pre><code>&lt;?php
  
  namespace App\Form;
  
  use App\Entity\User;
  use Symfony\Component\Form\AbstractType;
  use Symfony\Component\Form\CallbackTransformer;
  use Symfony\Component\Form\FormBuilderInterface;
  use Symfony\Component\OptionsResolver\OptionsResolver;
  use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
  use Symfony\Component\Form\Extension\Core\Type\SubmitType;
  use Symfony\Component\Form\Extension\Core\Type\CountryType;
  use Symfony\Component\Form\Extension\Core\Type\BirthdayType;
  use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
  use Symfony\Component\Form\Extension\Core\Type\LanguageType;
  use Symfony\Component\Form\Extension\Core\Type\PasswordType;
  use Symfony\Component\Form\Extension\Core\Type\RepeatedType;
  
  class UserType extends AbstractType
  {
      public function buildForm(FormBuilderInterface $builder, array $options): void
      {
          $builder
              -&gt;add('gender', ChoiceType::class, [
                  'choices' =&gt; [
                      'Je suis ...' =&gt; '',
                      'un homme' =&gt; 'male',
                      'une femme' =&gt;'female',
                      'non-binaire' =&gt; 'non-binary'
                  ]
              ])
              -&gt;add('lastname')
              -&gt;add('firstname')
              -&gt;add('birthdate', BirthdayType::class, [
                  'placeholder' =&gt; [
                      'year' =&gt; 'Année', 'month' =&gt; 'Mois', 'day' =&gt; 'Jour',
                  ],
                  'choice_translation_domain' =&gt; true
              ])
              -&gt;add('occupation')
              -&gt;add('nationality', CountryType::class, [
                  'placeholder' =&gt; 'Je choisis un pays',
              ])
              -&gt;add('nativelanguage', LanguageType::class, [
                  'placeholder' =&gt; 'Je choisis ta langue maternelle',
              ])
              -&gt;add('wishedlanguages', LanguageType::class, [
                  'placeholder' =&gt; 'Je choisis une langue étrangère',
                  'empty_data' =&gt; [],
                  'required' =&gt; false,
                  'compound' =&gt; true,
              ])
              -&gt;add(
                  $builder
                      -&gt;get('wishedlanguages')
                      -&gt;setRequired(false)
              )
              -&gt;add('email')
              -&gt;add('password', PasswordType::class, [
                  'mapped' =&gt; false
              ])
              -&gt;add('password', RepeatedType::class, [
                  'type' =&gt; PasswordType::class,
                  'invalid_message' =&gt; 'Les deux mots de passe doivent être identiques.',
                  'options' =&gt; ['attr' =&gt; ['class' =&gt; 'password-field']],
                  'required' =&gt; true,
                  'first_options'  =&gt; ['label' =&gt; 'Password'],
                  'second_options' =&gt; ['label' =&gt; 'Repeat Password'],
              ])
              -&gt;add('roles', CheckboxType::class, [
                  'label' =&gt; 'Je m\'inscris uniquement en tant qu\'organisateur.',
                  'required' =&gt; false,
                  'compound' =&gt; true,
              ])
              -&gt;add(
                  $builder
                      -&gt;get('roles')
                      -&gt;addModelTransformer(new CallbackTransformer(
                          function ($arrayAsBool) {
                          return in_array(&quot;ROLE_ADMIN&quot;, $arrayAsBool);
                      },
                          function ($boolAsArray) {
                          return $boolAsArray ? [&quot;ROLE_ADMIN&quot;] : [&quot;ROLE_USER&quot;];
                      }))
              )
              -&gt;add('save', SubmitType::class, [
                  'label' =&gt; 'Je valide',
              ])
              ;
          ;
      }
  
      public function configureOptions(OptionsResolver $resolver): void
      {
          $resolver-&gt;setDefaults([
              'data_class' =&gt; User::class,
              'translation_domain' =&gt; 'forms'
          ]);
      }
  }
  </code></pre>