Novalidate isn't working on FOS user registration form

Question

I overwrote the FOS UserBundle registration form and added the default options: 'attr'=> array('novalidate'=>'novalidate') as answered here (which seems like the right way to go) but for some strange reason the novalidated is added to a div right after the form instead of the form.

FormType:

<?php

namespace AppBundle\Form\Type;

use Symfony\Component\Form\FormBuilderInterface;
use FOS\UserBundle\Form\Type\RegistrationFormType as BaseType;
use Symfony\Component\OptionsResolver\OptionsResolverInterface;
use AppBundle\Services\RolesHelper;

class UserType extends BaseType
{
  /**
   * @var RolesHelper
   */
  private $roles;

  /**
   * @param string $class The User class name
   * @param RolesHelper $roles Array or roles.
   */
  public function __construct($class, RolesHelper $roles)
  {
    parent::__construct($class);

    $this->roles = $roles;
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(FormBuilderInterface $builder, array $options)
  {
    parent::buildForm($builder, $options);

    $builder->add('firstName')
            ->add('lastName')
            ->add('roles', 'choice', array(
              'choices' => $this->roles->getRoles(),
              'required' => false,
              'multiple'=>true
            ));
  }

  /**
   * {@inheritdoc}
   */
  public function getName()
  {
    return 'user_registration';
  }

  /**
   * @param OptionsResolverInterface $resolver
   */
  public function setDefaultOptions(OptionsResolverInterface $resolver)
  {
    parent::setDefaultOptions($resolver);

    $resolver->setDefaults(array(
      'attr'=> array('novalidate'=>'novalidate'),
    ));
  }
}

This is how my form looks:

<form action="/app_dev.php/profile/edit" method="POST" class="fos_user_profile_edit">
    <div id="fos_user_profile_form" novalidate="novalidate">
    // ....
    </div>
</form>

Why would it be adding it to the div after the form instead of the form element. Am I doing something wrong?

Answer 1

The novalidate="novalide" on the div is wrong. You need to place this on the form.

For example like this using the controller

$form = $this->createForm(new TaskType(), $task, array(
    'attr' => array(
           'novalidate' => 'novalidate'
    )
));

Or directly in the view

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

Final result

<form action="/app_dev.php/profile/edit" method="POST" class="fos_user_profile_edit" novalidate="novalidate">
    <div id="fos_user_profile_form">
    // ....
    </div>
</form>

EDIT:

Best solution via the form (for Symfony <= 2.6) WORKS

  /**
   * @param OptionsResolverInterface $resolver
   */
  public function setDefaultOptions(OptionsResolverInterface $resolver)
  {
    $resolver->setDefaults(array(
      'attr'=> array('novalidate'=>'novalidate'),
    ));
  }

Best solution via the form (for Symfony >= 2.7)

The configureOptions() method was introduced in Symfony 2.7. Previously, the method was called setDefaultOptions().

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'attr'=> array('novalidate'=>'novalidate'),
    ));
}

IMPORTANT:

If you're using FOSUserBundle, the configureOptions can't be applied directly on the form tag because this tag is manually called in the bundle views.

Example in the registration_content.html.twig :

<form action="{{ path('fos_user_resetting_reset', {'token': token}) }}" {{ form_enctype(form) }} method="POST" class="fos_user_resetting_reset">