paper-input show error while typing

[BennyAlex]

When the user click into the input field and type something, the error message only appears after he clicked somewhere outside. After the first touch, it work as expected and the error message will be refreshed on each interaction

[miguelcobain]

@BennyAlex this is supposed to be a feature, not a bug. We actually do some book keeping to only show errors after the first touch. Imagine an e-mail form. It is obvious that when you start out, the e-mail will be invalid (empty).

Do you agree?

[BennyAlex]

@miguelcobain if it is empty at start, there shouldnt be shown an error, I agree. My problem is that I have a button which is disabled if the input is invalid. So when the user types an email and its in a wrong format, he cant click the button and cant see the error, until he clicks on something else.

Edit: In my opinion the error should be displayed as soon as the user clicks into the field, not after he clicks out of it

[miguelcobain]

@BennyAlex How are you determining if the paper-input is valid or not? Are you using paper-form?

[BennyAlex]

@miguelcobain most times I using the paper-form. But it is input related, you can also use the email custom validator on the demo page

[miguelcobain]

@BennyAlex How are you disabling/enabling the button? Based on what value?

[BennyAlex]

@miguelcobain the value of the input?

[miguelcobain]

@BennyAlex post some code, please. I want to know what are you feeding into the disabled property of the button/how are you validating the e-mail/how are you extracting the paper-inputs validity state.

[BennyAlex]

I dont understand why the button matters...

            {{#paper-form onSubmit=(action "addMail" email) as |form|}}
              <form {{action form.onSubmit on="submit"}}>
                {{form.input label="E-Mail" value=email onChange=(action (mut email))
                             customValidations=emailValidation}}
                {{#form.submit-button raised=true primary=true disabled=(or form.isInvalid (not email))
                                      onClick=(action "addMail" email)}}
                  submit
                {{/form.submit-button}}
              </form>
            {{/paper-form}}

when the user types the mail address for the first time without clicking out:

after clicking out:

[miguelcobain]

I asked you where does the disabled value was coming from. Now I know it is coming from paper-form. So, as I understand it the button disabling logic works fine. You just want to show errors sooner, correct?

If so,

{{form.input label="E-Mail" value=email onChange=(action (mut email))
  customValidations=emailValidation isTouched=true}}

should help (notice isTouched=true).

[BennyAlex]

thanks, this works in some cases. But thinking of a required input field, the error will be shown at start. And that is confusing, we both aggreed.

Edit: I dont understand why the errors shouldnt be shown by default as soon as the user clicks AND type/interact into/with the field. I think it is really boring to type something in and then I also have to click out of the input just to see if the value is valid

[miguelcobain]

But thinking of a required input field, the error will be shown at start.

Exactly. That's why we only show errors after the first blur.

For example, you could make the input touched only if length greater than 0:

{{form.input label="E-Mail" value=email onChange=(action (mut email))
  customValidations=emailValidation isTouched=shouldBeTouched}}

shouldBeTouched: computed.gt('email.length', 0)

[BennyAlex]

Exactly. That's why we only show errors after the first blur.

As I know, the blur is triggered when clicking out of a field, right?

But thinking of a required input field, the error will be shown at start.

Why not show errors after the first interaction/typing?