Buy
Buy
This tutorial has a new version, check it out!

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:

... 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) }}
</div>
</div>
</div>
{% 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!

  • 2018-03-09 Diego Aguiar

    Symfony has many out of the box validations depending on the field type that you choose, like for example, you can define a field as an Email field, then, if that field is required, symfony will validate that the input of that field has the form of an "email"
    You can see all the available field types here: https://symfony.com/doc/cur...

    > I'm curious if standard validation options may be reflected in html5 required fields
    Yes, but only if that field is actually required.

  • 2018-03-08 Jacek Dziurdzikowski

    Yes, I guess so, but I just added the comment to point out that it might be not necessary to disable html5 validation in advance, because its not the truth that Symfony renders all fields marked as required. However, I didn't check how Symfony treats custom data objects which about Ryan mentioned at the end of the course, but as I expect - there are no applicable ORM nullable annotations for them, but after all they can have standard validation applied - I'm curious if standard validation options may be reflected in html5 required fields or this can work only for submitted form.

    Cheers!

  • 2018-03-08 Diego Aguiar

    Hey Jacek Dziurdzikowski

    Are you using field-type-guessing, right? That's why Symfony detects that that field is able to be null, and hence, does not adds the required attribute.

    Cheers!

  • 2018-03-08 Jacek Dziurdzikowski

    I use for this tutorial symfony 3.1.4 and the FunFact field which is set nullable=true in the entity annotation does not render as required in HTML5.

  • 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 :)

    Cheers!

  • 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.

    Cheers!

  • 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.