Closed
Description
| Q | A |
|---|---|
| Bug report? | yes |
| Feature request? | no |
| BC Break report? | no |
| RFC? | no |
| Symfony version | 3.4 |
I'm currently studying this framework lately and I'm working on server-side form validation. I'm using Bootstrap 4 for styling my form but after setting a NotBlank validator it print only the validation error message but not styling like adding has-error class on the parent div of the input field.
The first screenshot is from google chrome v62:
The second screenshot is from mozilla firefox 57
Here's the html generated by the Form Builder
<form name="app_bundle_customer_form_type" method="post">
<div id="app_bundle_customer_form_type">
<div class="form-group">
<label class="form-control-label required" for="app_bundle_customer_form_type_name">Name</label>
<input type="text" id="app_bundle_customer_form_type_name" name="app_bundle_customer_form_type[name]" required="required" class="form-control form-control is-invalid" />
<div class="invalid-feedback">
<ul class="list-unstyled mb-0">
<li>Please enter something.</li>
</ul>
</div>
</div>
<div class="form-group">
<label class="form-control-label required" for="app_bundle_customer_form_type_address">Address</label>
<input type="text" id="app_bundle_customer_form_type_address" name="app_bundle_customer_form_type[address]" required="required" class="form-control" />
</div>
<div class="form-group">
<label class="form-control-label required" for="app_bundle_customer_form_type_birthdate">Birthdate</label>
<input type="text" id="app_bundle_customer_form_type_birthdate" name="app_bundle_customer_form_type[birthdate]" required="required" class="js_datepicker form-control" />
</div>
<div class="form-group">
<label class="form-control-label required" for="app_bundle_customer_form_type_age">Age</label>
<input type="number" id="app_bundle_customer_form_type_age" name="app_bundle_customer_form_type[age]" required="required" pattern=".{2,}" class="form-control form-control is-invalid" />
<div class="invalid-feedback">
<ul class="list-unstyled mb-0">
<li>Please enter something.</li>
</ul>
</div>
</div>
<div class="form-group">
<label class="form-control-label required" for="app_bundle_customer_form_type_isActive">Is active</label>
<select id="app_bundle_customer_form_type_isActive" name="app_bundle_customer_form_type[isActive]" required="required" class="form-control">
<option value="" selected="selected">Select the status</option>
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
<input type="hidden" id="app_bundle_customer_form_type__token" name="app_bundle_customer_form_type[_token]" value="gb985ZjtF6swI8ZL9clgJV2e8o1RCIp35VSwjMeqQHU" />
</div>
<button class="btn btn-primary" role="button" formnovalidate>Save</button>
</form>