Remove data-error attribute when removing errors

[MaximBalaganskiy]

Currently, the attribute is not cleared which later overrides a different error message

[coveralls]

Coverage remained the same at 95.154% when pulling f31a027 on MaximBalaganskiy:master into c75d8d4 on aurelia-ui-toolkits:master.

[coveralls]

Coverage remained the same at 95.154% when pulling 05e22d1 on MaximBalaganskiy:master into c75d8d4 on aurelia-ui-toolkits:master.

[Ullfis]

Nice one 😄

The data-error value is set by md-validate-error attribute. If you remove the data-error value, that message is gone.

Brain fart: add temporary data attribute to indicate if data-error is set in code:

      add(element, error) { ..

        // get error message from label
        let msg = label.getAttribute('data-error');
        if(!msg) {
          // error message not set? add
          label.setAttribute('data-error', errorMessage);
          label.setAttribute('data-amb-tmp', 'err');        // ← temporary
        } else {
          // set label message into error object
          error.message = msg;
        }
..

    remove(element, error) { ..

      let label = element.querySelector('label');
      if (label && label.getAttribute('data-amb-tmp')) {
        label.removeAttribute('data-error');
        label.removeAttribute('data-amb-tmp');
      } 

[MaximBalaganskiy]

Yeah... The question is should you really mix original validation with aurelia validation?.. I also don't particularly like that empty invalid controls stay active. It seems like a materialize CSS bug where validation label is messed up without an active class. I used to have a quick CSS hack in my project to fix that...

[Ullfis]

Agree. Original validation should not be used when using aurelia validation. Remove md-validate="true" and use this css:

    label[data-error]:after {
        -webkit-transition-property: all !important;
        transition-property: all !important;
        white-space: nowrap;
        font-size: 0.8rem;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    label[data-error]:not(.active):after {
      -webkit-transform: translateY(-140%);
      -ms-transform: translateY(-140%);
      transform: translateY(-140%);
    }

The error message do a little «bump» when the control get/loose focus. I would really like to know how to fix that.

[MaximBalaganskiy]

@Ullfis i don't think it's possible without removing the transitions

[MaximBalaganskiy]

I ended up with

.input-field label[data-error]:after {
  font-size: 0.8rem !important;
  white-space: nowrap; }

.input-field label[data-error]:not(.active):after {
  -webkit-transform: translateY(-140%);
  -ms-transform: translateY(-140%);
  transform: translateY(-140%); }

Seems to do the job

[Thanood]

Should be covered by #245, right? Sorry I've lost track somehow.
If so, I'd like to close this one.

[MaximBalaganskiy]

Seems like this one is a duplicate

On 1 Sep 2016 3:44 AM, "Daniel Bendel" notifications@github.com wrote:

Should be covered by #245
#245,
right? Sorry I've lost track somehow.
If so, I'd like to close this one.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#241 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADimvBNmyCsWOL6SfF7esDkCyx20BnWFks5qlb1zgaJpZM4JwJ-6
.