I'm using symfony 2.8. In registration form, when I submit form with empty fields, it is showing validation errors in tag. It is really making the UI looks bad. How can I change the css of each validation error messages.
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register','novalidate': 'novalidate'}}) }}
<div class="form-group">
{{ form_row(form.name) }}
</div>
<div class="form-group">
{{ form_row(form.email) }}
</div>
<div class="form-group">
{{ form_row(form.username) }}
</div>
<div class="form-group">
{{ form_row(form.plainPassword.first) }}
</div>
<div class="form-group">
{{ form_row(form.plainPassword.second) }}
</div>
<div>
<input type="submit" class="btn btn-primary" value="{{ 'registration.submit'|trans }}" />
</div>
{{ form_end(form) }}
You are rendering form fields using form_row widget which renders label, field & related error to do custom styling you can render your fields and their labels and errors individually like
{{ form_start(form, {'method': 'post', 'action': path('fos_user_registration_register'), 'attr': {'class': 'fos_user_registration_register','novalidate': 'novalidate'}}) }}
{{ form_label(form.email) }}
<div class="some_class">{{ form_errors(form.email) }} </div>
{{ form_widget(form.email) }}
{{ form_end(form) }}
<style type="text/css">
.some_class{
/* write custom styling rules here */
}
</style>
Or get all errors in one place like
{# render any "global" errors #}
{{ form_errors(form) }}
Reference: Twig Template Form Function and Variable Reference
The errors have their own element and classes that you could target from your css.
One basic approach could by using a form theme as described here, or you could create your own form theme.
If you want to customise the tags it renders you could do what this guy does here.
Related
I overrided my form in EasyAdmin to organize differently my input so I did like this :
In my Crud :
public function configureCrud(Crud $crud): Crud
{
return $crud
->setPageTitle(Crud::PAGE_INDEX, 'admin.menu.infos')
->setFormThemes(['bundles/EasyAdminBundle/crud/company/edit.html.twig'])
;
}
And in my Twig :
{% extends '#EasyAdmin/crud/form_theme.html.twig' %}
{% use '#EasyAdmin/symfony-form-themes/bootstrap_5_layout.html.twig' %}
{% block form %}
{{ form_start(form) }}
<div class="row">
{{ form_row(form.logo) }}
{{ form_row(form.phone) }}
{{ form_row(form.catchphrase) }}
</div>
<div class="row">
{{ form_row(form.businessName) }}
{{ form_row(form.email) }}
{{ form_row(form.website) }}
</div>
<div class="row">
{{ form_row(form.companyName) }}
{{ form_row(form.address) }}
{{ form_row(form.linkedin) }}
</div>
<div class="row">
{{ form_row(form.siren) }}
{{ form_row(form.zipcode) }}
{{ form_row(form.facebook) }}
</div>
<div class="row">
{{ form_row(form.legalForm) }}
{{ form_row(form.city) }}
{{ form_row(form.twitter) }}
</div>
<div class="row">
{{ form_row(form.description) }}
</div>
{{ form_end(form) }}
{% endblock %}
The form is like I wanted and when I submit, it's work but the problem is when I make an error. For example if I valid with an empty value, then instead of getting my form_errors, I've got a 500.
I've tried different things but none of them worked :
block errors :
{{ form_start(form) }}
{% block form_errors %}
{{ parent() }}
{% endblock %}
individual error :
{{ form_errors(form.businessName) }}
Any idea ?
In my Symfony 2 app I got the following code rendering the form:
{{ form_start(form) }}
{{ form_errors(form) }}
<div class="form-group">
{{ form_label(form.title) }}
{{ form_widget(form.title) }}
</div>
<div class="form-group">
{{ form_label(form.message) }}
{{ form_widget(form.message) }}
</div>
{% if extras == true %} //this block should be rendered only if extras var is true
<div class="form-group">
{{ form_label(form.description) }}
{{ form_widget(form.description) }}
</div>
{% endif %}
{{ form_end(form) }}
The problem is that I get rendered {{ form_widget(form.description) }} even if my extras var is false, not with all other form fields but somewhere at the bottom of the form which is obviously a bug. How to make it render only if extras is true and disappear completely from the page in case extras is false?
Thank you.
All other form fields are automatically added to the end of your form by default. It triggers {{ form_rest() }} by default. Use this code to prevent this behavior:
{{ form_end(form, {'render_rest': false}) }}
http://symfony.com/doc/current/reference/forms/twig_reference.html#form-end-view-variables
I have below problem with FOSUserBundle customization.
I was overwritten FOSUser register form, then I changed register_content from
{{ form_widget(form) }}
to:
<div class="col-md-6">
{{ form_label(form.firstname) }}
{{ form_errors(form.firstname) }}
{{ form_widget(form.firstname) }}
{{ form_label(form.lastname) }}
{{ form_errors(form.lastname) }}
{{ form_widget(form.lastname) }}
</div>
<div class="col-md-6">
{{ form_label(form.email) }}
{{ form_errors(form.email) }}
{{ form_widget(form.email) }}
{{ form_label(form.plainPassword) }}
{{ form_errors(form.plainPassword) }}
{{ form_widget(form.plainPassword) }}
{{ form_label(form.plainPassword.second) }}
{{ form_errors(form.plainPassword.second) }}
{{ form_widget(form.plainPassword.second) }}
</div>
But, when I was went to the browser, I got it:
bad form render
The form renders incorrectly. How I can repair this?
try with this
{{ form_label(form.plainPassword.first) }}
{{ form_errors(form.plainPassword.first) }}
{{ form_widget(form.plainPassword.first) }}
{{ form_label(form.plainPassword.second) }}
{{ form_errors(form.plainPassword.second) }}
{{ form_widget(form.plainPassword.second) }}
I'm trying to control the rendering of password fields based on whether i'm editing an user or creating one. I'm doing this with a simple session boolean variable as follows:
{{ form_start(userForm) }}
{{ form_errors(userForm) }}
<div id="user-fg-email" class="form-group">
{{ form_label(userForm.email) }}
{{ form_errors(userForm.email) }}
{{ form_widget(userForm.email) }}
</div>
{% if app.session.get('editingUser') == false %}
<div id="user-fg-pp1" class="form-group">
{{ form_label(userForm.plainPassword.first) }}
{{ form_widget(userForm.plainPassword.first) }}
</div>
<div id="user-fg-pp2" class="form-group">
{{ form_label(userForm.plainPassword.second) }}
{{ form_errors(userForm.plainPassword.first) }}
{{ form_widget(userForm.plainPassword.second) }}
</div>
{% endif %}
<div id="user-fg-role" class="form-group">
{{ form_label(userForm.role) }}
{{ form_errors(userForm.role) }}
{{ form_widget(userForm.role) }}
</div>
<button type="submit" class="btn btn-primary pull-right">Submit</button>
{{ form_end(userForm) }}
However when this boolean is evaluated as true, which is supposed to prevent these fields from rendering, they are still being rendered assumingly by the later following form_end tag.
Is there a way to prevent that from happening?
edit:
if editingUser == true the password fields are actually rendered after the button, hence my assumption it's done so by the form_end tag.
Because you have to specify Twig to not display all the rest of the fields which are not explicitly rendered in the form : http://symfony.com/doc/current/reference/forms/twig_reference.html#form-end-view-variables
{{ form_end(form, {'render_rest': false}) }}
I am currently using Symfony2 with the MopaBootStrap Bundle but with Bootstrap2.3.2.
I am experiencing problems with the styling of symfony forms. What I am trying to achieve is a horizontal form with 3 things on it:
a) An input field
b) A collection that uses a subform
c) A subform
My current code:
// The view file
{{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
<div class="row">
{{ form_row(form.field) }}
</div>
<div class="row">
{{ form_row(form.collection) }}
</div>
<div class="row">
{{ form_row(form.subform) }}
</div>
{{ form_end(form) }}
// The form type
$builder->add('field', null, array('label' => 'Enter Name'));
$builder->add('collection', 'collection', array('type' => 'test_project_collection_subform'));
$builder->add('subform', 'test_project_subform', array('label' => 'Enter Donation'));
// I know that everything in the builder lines can be chained and that the arrays are not in the correct coding standards but this is the basics of my form
Ok so I know that with bootstrap everything is divided into grids of 12. I don't want a fluid grid the normal grid would do the trick. I basically want everything 6 wide and in the center so logically it would mean span6 offset3.
First Attempt:
// The view file
{{ form_start(form, {'attr': {'class': 'form-horizontal'}}) }}
<div class="row">
{{ form_row(form.field, {'attr': {'class': 'span6 offset3'}}) }}
</div>
<div class="row">
{{ form_row(form.collection, {'attr': {'class': 'span6 offset3'}}) }}
</div>
<div class="row">
{{ form_row(form.subform, {'attr': {'class': 'span6 offset3'}}) }}
</div>
{{ form_end(form) }}
This produces the first Image - I added
<div class="row">
<div class="span3 well">3</div>
<div class="span6 well">6</div>
</div>
to show the grid
![1]: http://imgur.com/jDfC0Xo "tooltip"
You can see that none of the elements is aligning and none of them are at the same position as the span6 and none of the sub forms are 6 long.
I also tried to split the elements into
{{ form_label() }}
{{ form_widget() }}
{{ form_errors() }}
But this failed to work as well. Even though this placed the field at the correct place and size but if there is a error in that field only the error message is red and not the label + widget + error message.
I went and looked a bit deeper and found that you have to use the entire control group for this.
I tried
<div class="row">
<div class="offset3">
<div id="appbundle_field_control_group" class=" control-group">
<label class=" control-label required" for="appbundle_field"></label>
<div class=" controls">
<textarea id="appbundle_field" class="span6" maxlength="400" required="required" name="appbundle_[field]"></textarea>
</div>
</div>
</div>
</div>
But I still had the same problem when there was an error in the field.
So the first part of my question will be how do I style the field so that it spans 6 and when there is an error everything turns red as it does by default?
My second part will be how do I style subform elements without having to include templates each time?
My final question will be where can I find more examples of styling symfony2 with bootstrap2.3.2 that is a bit more complex than the examples on getbootstrap.com?