Floating label doesn't work on input[type=email] when value is not valid

[eliashdezr]

Using this code

<div class="floating-label">
  <input required="required" type="email" class="full-width">
<label>Email</label></div>

And typing anything without the @ causes this behavior on the label:

[vuchl]

Hmm that's kind of strange. from https://github.com/quasarframework/quasar/blob/dev/src/css-components/textfield/textfield.mat.styl and https://github.com/quasarframework/quasar/blob/dev/src/css-components/textfield/textfield.ios.styl there is not difference in the types of input tags to be seen. But maybe I'm looking at the wrong part of the code.

[rstoenescu]

New component coming soon for floating label.

[eliashdezr]

@rstoenescu Cool!

Btw, just wanted to add another strange behavior on the password input label:

Hope this helps in the new component!

[CookieJon]

@eliashdezr Thanks, I'll make sure that's included in the fix (which I'm doing now)

[rstoenescu]

PR is being worked on by @CookieJon

[oswaldofreitas]

@CookieJon @rstoenescu Don't know if you found the solution, I guess the problem happens here:

https://github.com/quasarframework/quasar/blob/dev/src/css-components/textfield/textfield.mat.styl#L67 (input:valid)

I was investigating how MaterializeCss solve this, they put a .active class via jQuery into input when it doesn't have focus or when it have a value.

@eliashdezr as a workahound for now you could remove type="email" from input and validate it with vuelidate (it has an email validator out of the box)

[rstoenescu]

Consider this solved. There's a mega-patch coming up for form components.

[oswaldofreitas]

Do you have a planned date for this to be released?

Please, consider creating a q-input with properties like: label, label type (floating, stacked, left).

Would be nice to have integration with validation showing message (could have a rule property).

So, instead of:

<div class="floating-label">
  <input required class="full-width"
    v-model.trim="vm.email" @change="$v.vm.email.$touch()"
    :class="{'has-error': $v.vm.email.$error}">
  <label>E-mail</label>
</div>
<div v-if="$v.vm.email.$error" class="text-negative">
  <small v-if="!$v.vm.email.required">E-mail is mandatory</small>
  <small v-if="!$v.vm.email.email">Please, inform a valid e-mail</small>
</div>

We could have:

<q-input label="E-mail" label-type="floating" v-model.trim="vm.email" validation-rule="email"></q-input>

class="full-width" by default

validation object could be something like

email {
  required: { message: "E-mail is mandatory" },
  email: { message: "Please, inform a valid e-mail" }
}

[rstoenescu]

@oswaldomilet It's exactly what I've been working on the whole week :) + more other form related things.

[rstoenescu]

Will be available in v0.14