vue-md-input-wrapper

Generic material wrapper for any input in Vue

Display an input the material way and animate the label when the input is empty and focused or blured.

Inspired (with c/c) by a scotch tutorial

Usage

Use it with your own inputs that you configure.

<md-input-wrapper :label="MyInput" :required="required" :error="errorText">
    <input type="text" required />
</md-input-wrapper>

Importance of HTML validation

Everything is done by CSS, so the class input:valid is the key point of the animations The HTML validation should therefore specify "invalid" when empty - so the "required" option of the input has to be set regardless of if the field is requiresd in the application or not; and any other validation mechanisms are to be set off : the validation is managed upstream from this control.

So, the HTML has to invalidate an empty string and validate all the remaining. If this is impossible, like for HTML5 types, you can remove the required part so that the label doesn't move and never interferes with the pattern displayed by the browser like for date, time, or invalid number, email and URL.

After, when validation is done upstream, setting the "error" property to a truish string displays the string and changes some colors

The "required" property allows to display an " * " in color too but doesn't influence the validation mechanism beside.

Examples

<md-input-wrapper :label="Address">
    <vue-google-autocomplete
            id="map"
            classname="form-control"
            placeholder="Start typing"
            v-on:placechanged="getFromData"
    >
    </vue-google-autocomplete>
</md-input-wrapper>

<md-input-wrapper :label="Address">
    <cleave placeholder="Enter your credit card number" :options="{ creditCard: true }"></cleave>
</md-input-wrapper>