google / material-design-lite

Material Design Components in HTML/CSS/JS
https://getmdl.io
Apache License 2.0
32.29k stars 5.03k forks source link

Support multiple validation error messages #4853

Open airtonix opened 8 years ago

airtonix commented 8 years ago

Bugs

Please include the following information with your bug report:

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

...
    "material-design-lite": "^1.2.1",
...

What browser(s) is this bug affecting (including version)?

all

What OS (and version) are you using?

any

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

Using vee-validate with vuejs, which isn't important, but the fact that I can multiple validation errors at one time per field is:

    <div
        class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
        :class="{ 'is-invalid': valdiation.has(name) }">
        <input
            class="mdl-textfield__input"
            :type="type"
            :name="name"
            ref="input"
            v-model="model">
        <label
            class="mdl-textfield__label"
            :for="name">{{ label }}</label>
        <span
            v-if="valdiation.has(name)"
            class="mdl-textfield__error">
                <div v-for="error in valdiation.collect(name)"><i class="material-icons">error</i> {{ error }}</div>
        </span>
    </div>

What is the expected behavior?

that the error messages do not overlap on top of the next field

What is the actual behavior?

the error messages overlap on top of the next field

Any other information you believe would be useful?

\ Source code** https://github.com/airtonix/zenobi.us/blob/master/src/components/molecules/field-text.vue

\ Recording of scenario** 2016-10-16_17-50-39!

jayonthegreen commented 7 years ago

good