Implement required field validation about material

[sesemaya]

hi @plrenaudin is the following code what you are looking for?

<div class="form-group form-group-label form-group-red">
    <div class="row">
        <div class="col-lg-6 col-sm-8">
            <label class="floating-label" for="input-required">Required</label>
            <input class="form-control" id="input-required" type="text">
            <span class="form-help form-help-msg text-red">Input is required<i class="form-help-icon icon icon-warning"></i></span>
        </div>
    </div>
</div>

[plrenaudin]

Hi @sesemaya,
Thanks for replying.
The behavior of a required field is not the same on the polymer element: once you fill it in, the warning disappear.
The best way would be to handle this the same as the required attribute on a html input : display the warning on the form submit.

[shib71]

Couldn't you implement this yourself with JavaScript? Incorporating
specific behaviours is a little beyond the focus of this project, which is
design and page structure.

On Wed, Apr 22, 2015 at 5:36 PM, Pierre-Louis Renaudin <
[email protected]> wrote:

Hi @sesemaya https://github.com/sesemaya,
Thanks for replying.
The behavior of a required field is not the same on the polymer element:
once you fill it in, the warning disappear.
The best way would be to handle this the same as the required attribute on
a html input : display the warning on the form submit.

—
Reply to this email directly or view it on GitHub
#12 (comment).

[plrenaudin]

Ok, I found a small workaround anyway which works for me without JS.
I added those lines at the end of base.css

.form-control:invalid, .form-control:invalid + .floating-label{
  color:red;
  border-bottom-color:red;
}