Html5Validation

Question

I am new to Html5 so go easy on me with this question...

I am trying to use HTML5 built in form validation. I am using Bootstrap as my framework. Each time I go to submit a form, when it validates it is putting the bubble way below the form fields that needs to be fix. It would seem to the end user as though it is the field below the one that has the error (Product Name is the one with the error). I have included a screen shot of what I am geting. Here is my markup: Thanks for your help!!!

<div class="control-group">
<label class="control-label required" for="product_name">Name</label>
<div class="controls">
    <input type="text" id="product_name" name="product[name]" required="required" placeholder="Product Name" class="span12" value="" />
</div>

enter image description here

Your problem is a css (and javascript?) problem. Nobody can answer only by reading the html. — moebius_eye
– moebius_eye, Commented Mar 13, 2013 at 21:57
I am using a standard Bootstrap installation. I have no css or js other than that which bootstrap has installed. I cant paste 10,000 lines of css :) — LargeTuna
– LargeTuna, Commented Mar 13, 2013 at 22:03
Looks like it has something to do with this class "<div class="navbar">". I have bootstraps nav bar installed on my page as well as this form. I don't know, what a mess! — LargeTuna
– LargeTuna, Commented Mar 13, 2013 at 22:14
The blank warning is displayed by browser and there is no way to style the message or the bubble. This seems like a bug on your browser's side (you're using Chrome if I'm not mistaken) - try updating to the newest version or disable HTML5 validations and handle them yourself. HTML5 validations are crap anyway - doesn't work for radios and checkboxes. — tomas.pecserke
– tomas.pecserke, Commented Mar 13, 2013 at 22:38

Thomas Potaire · Accepted Answer · 2013-03-13 22:35:55Z

1

In your FormBuilder, turn off the option require and use Form Validation.

Example in ProductType.php

$builder->add('name', 'text', array(
    'label'    => 'Name',
    'required' => false   // this will remove the HTML5 error which in my opinion is meh
));

In your validation.yml

Your\AwesomeBundle\Entity\Product:
    properties:
        name:
            - NotBlank: ~  # when you call bindRequest on the form object it will validate the form data against that constraint

Make sure you check the Form Validation documentation because as of Symfony2.2 some constraints has changed.

answered Mar 13, 2013 at 22:35

Thomas Potaire

6,29638 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Html5Validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related