SymfonyCasts stands united with the people of Ukraine
If you liked what you've learned so far, dive in!
Subscribe to get access to this tutorial plus
video, code and script downloads.
Leave everything blank and hit save.
Oh, it doesn't submit. Instead we get this validation error. So where's that coming from?
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.
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!
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!
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!
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.
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.
Hey Fabrizio S. ,
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!
Yes indeed! It's just something that I used to do but of course has no connection with SF version :)
Good tip btw, thanks for sharing it ;) Actually, I had used it a lot before I discovered "formnovalidate" attribute for submit buttons :)
Cheers!
// composer.json
{
"require": {
"php": ">=5.5.9",
"symfony/symfony": "3.1.*", // v3.1.4
"doctrine/orm": "^2.5", // v2.7.2
"doctrine/doctrine-bundle": "^1.6", // 1.6.4
"doctrine/doctrine-cache-bundle": "^1.2", // 1.3.0
"symfony/swiftmailer-bundle": "^2.3", // v2.3.11
"symfony/monolog-bundle": "^2.8", // 2.11.1
"symfony/polyfill-apcu": "^1.0", // v1.2.0
"sensio/distribution-bundle": "^5.0", // v5.0.22
"sensio/framework-extra-bundle": "^3.0.2", // v3.0.16
"incenteev/composer-parameter-handler": "^2.0", // v2.1.2
"composer/package-versions-deprecated": "^1.11", // 1.11.99
"knplabs/knp-markdown-bundle": "^1.4", // 1.4.2
"doctrine/doctrine-migrations-bundle": "^1.1" // 1.1.1
},
"require-dev": {
"sensio/generator-bundle": "^3.0", // v3.0.7
"symfony/phpunit-bridge": "^3.0", // v3.1.3
"nelmio/alice": "^2.1", // 2.1.4
"doctrine/doctrine-fixtures-bundle": "^2.3" // 2.3.0
}
}
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.