Disable HTML5 Validation

Leave everything blank and hit save.

Oh, it doesn't submit. Instead we get this validation error. So where's that coming from?

The Famous required Attribute

Hint: it's not Symfony!. It's our friend HTML5. When Symfony renders the field, it's adding a required="required" attribute, and this activates HTML5 validation.

But, there are a few problems with this. First, Symfony always adds the required attribute... even if it's not actually required in the database. It'a a borderline bug in Symfony.

And actually, that's not totally fair. If you use field-type-guessing, Symfony will guess whether or not it should render this by looking at your database and validation config. But as soon as you set your field type, it stops doing that. Boo!

Here's the second problem: even if we like this HTML5 client-side validation, we still need to add true server-side validation. Otherwise, nasty users can go crazy on our site.

Disable HTML5 Validation

So here's what I do: I disable HTML5 validation and rely purely on server-side validation.

If you do want some fancy client-side validation, I recommend adding it with a JavaScript library. These give you more features and control than HTML5 validation.

There's even a bundle - JsFormValidatorBundle - that can dump your server-side rules into JavaScript.

So how do we disable HTML5 validation? Very simple: find the submit button and add formnovalidate:

45 lines app/Resources/views/admin/genus/new.html.twig
... lines 1 - 22
{% block body %}
<div class="container">
<div class="row">
<div class="col-xs-12">
... lines 27 - 28
{{ form_start(genusForm) }}
... lines 30 - 38
<button type="submit" class="btn btn-primary" formnovalidate>Save</button>
{{ form_end(genusForm) }}
{% endblock %}

That's it. Refresh the page now and submit. No more HTML5 validation. But of course now, we need server-side validation!

Leave a comment!

  • 2017-07-18 Victor Bocharsky

    Good tip btw, thanks for sharing it ;) Actually, I had used it a lot before I discovered "formnovalidate" attribute for submit buttons :)


  • 2017-07-17 deskema

    Yes indeed! It's just something that I used to do but of course has no connection with SF version :)

  • 2017-07-17 Victor Bocharsky

    Hey deskema ,

    You're right, your case is valid too. Actually, it's not something related to Symfony 2.3 but to HTML in general - it's just an HTML5 attribute. So you can disable HTML5 validation for button... or disable it for entire form - useful when you have more than one submit button in your form.


  • 2017-07-14 deskema

    I guess there is also another method to disable HTML5 validation.
    With Symfony 2.3 I used to use the following statement:

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

    In other words I put the novalidate parameter in the form markup instead of submit button.