Add validation for textarea and datepicker. Update the sample app.

[Ganbin]

I have made some modification for displaying the error on textarea and datepicker elements with aurelia-validation, which I need in my app. I have also update the sample app with some example for the select, textarea and datepicker elements.

The only problem I get is that the datepicker error doesn't add/remove when changing the value, but only if we click again on the input field or if we trigger the validation manually. But I think that is a problem on the way the value is changed on a datepicker because it doesn't trigger the render function of the ValidationRenderer when changing the value.

[coveralls]

Coverage remained the same at 95.154% when pulling 55164a8 on Ganbin:master into 03d3487 on aurelia-ui-toolkits:master.

[Thanood]

Thanks. 👍
Yeah, pickadate has some "focus-magic" going on. I think it doesn't blur for some reason..

If you use our commit message conventions your changes will appear in the changelog automatically. I'll edit the log for now.

Btw.: a sample for select is on the select page. 😃

[Ganbin]

Hoo yes... I haven't check that I was in the input section. -_-' So I should change the datepicker validation example in the datepicker section too. Sorry for the misunderstood.

[Ganbin]

I'm not used to contribute to project so for me is like a training and learning so sorry if I do mistake. I will read the commit conventions and try to do it the right way.

[Thanood]

No problem at all. 😃
Datepicker validation should go onto datepicker page, yes.

[coveralls]

Coverage remained the same at 95.154% when pulling e7b33ae on Ganbin:master into 03d3487 on aurelia-ui-toolkits:master.

[Ganbin]

I have made some modification.

Ability to have a showErrortext bindable to the md-datepicker. The same way you have done with the md-select. Then I have change the code in the renderer for the md-datepicker to check the attribute.

I have removed the example on the input section and add a validation example on the datepicker section.

[Thanood]

Looks good to me. 👍
The date picker error messages' click event cause an error, though: Uncaught Error: focus is not a function and navigate to the start page.

If you know how to fix it, this would be great but I'm not sure if it is. Maybe create a view model function which opens the date picker.
Also, reset doesn't seem to do anything. I guess it does reset the controller but it doesn't clear the datepicker input. I'll comment on the source in a few minutes (it's more readable that way).

[Thanood]

I guess this should be date.. 😃
Also, if you set it to an empty string, it will contain the current date. Set it to null and it works.

[Ganbin]

You are right, thanks.

[Thanood]

Probably date2 here.

[Thanood]

The click event makes the app navigate to the start page and throw an error ("focus is not a function").
I'll log the error.target and see what's the actual target.

[Thanood]

If you add md-datepicker.ref (datePicker and date2Picker) to the datepickers and change the above line to:

<li repeat.for="error of controller.errors">
  <a href="#" click.delegate="openErrorTarget(error, $event)">
    ${error.message}
  </a>
</li>

And add this to the viewModel:

  openErrorTarget(error, $event) {
    this[`${error.propertyName}Picker`].openDatePicker();
    $event.preventDefault();
  }

Then it works.
It's a bit hacky, though. The attribute refs need to be named in such a way that the above function can find them (adding Picker to the propertyName / view model variable).
Maybe there's a better way, but I don't see it right now.

[Ganbin]

Ok I haven't check this part. I will take a look.

[Ganbin]

I have add this code, and the focus is done and the datepicker is open, But the problem, again, is when we choose a date, the error is not removed until we click the field or trigger the validation manually.

How to let the validator know that we have change the value? I don't know for now how the validator is trigger when changing a value from an form field.

[Thanood]

The validator is triggered with a blur event by default.
According to the source it should blur when the picker closes, but it doesn't seem that it blurs.

[Thanood]

Actually, it does blur when opening the picker. That's why the error mesasge appears at all. Interesting.

With this onClose it should blur on close:

  onClose() {
    let selected = this.picker.get('select');
    this.value = selected ? selected.obj : null;
    fireEvent(this.element, 'blur');
  }

Needs this import:

import {fireEvent} from '../common/events';

I'll have a look at blur on open.

[Thanood]

The pickadate api docs suggest that the input is focused when opening:
http://amsul.ca/pickadate.js/api/#method-open-focus

I guess the input is focused, then the picker is opened, causing the input to blur.
It seems we could work around that by opening/closing the picker explicitly and override the built-in mechanic (but I may be wrong as I've only read briefly).

"Rewriting" the open/close mechanic to be explicit seems to be a lot (consider testing all that)..
I think having an error message when the picker opens doesn't stop us from adding these changes. At least for now, that would be okay.

What do you think?

[Ganbin]

The first suggestion you write, with the fireEvent is working. I still not sure to understand why a this.element.blur() or $(this.element).blur() doesn't work when the fireEvent(this.element, 'blur') is working.

[Ganbin]

I have take a look at the pickadate code but it seems complicated for me to understand the behaviour. I think this solution to force the blur inside the bridge md-datepicker custom attribute is more simple for now.

[Thanood]

TBH I don't understand the jQuery event handlers, so I cannot tell you about blur.. 😉
But I know for sure that jQuery blur doesn't fire a "real" blur event and thus aurelia-validation doesn't catch this event.

fireEvent does fire a "real" (custom) blurevent. That's why it works. 😃
Select had the same problem with the change event.

I think when you add the fireEvent change, we can merge this if you feel okay with it.

[coveralls]

Coverage remained the same at 95.154% when pulling ae500d5 on Ganbin:master into 03d3487 on aurelia-ui-toolkits:master.

[Thanood]

@Ganbin Not sure if you received the notifications in the code comments because they are hidden now. 😃

[Ganbin]

Ok I see your comments.

[Ganbin]

Ok here is the fix. I think the rendering is good and I don't see unexpected behaviour if we follow the html and javascript code on the datepicker validation in the sample app.

Thanks a lot for the help to resolve the issues in my pull request.

[Thanood]

Merged and released, thank you! 👍
I will upload the catalog app with samples a bit later.