Aurelia validation for external plugin

Help Requests
1

I can easily validate input for basic elements like this:

<input type="text" value.bind="post.title & validate">

But I use a plugin for displaying dates (with a calendar)

<abp-datetime-picker element.bind="datepicker" 
                     model.bind="post.creationDate"
                     options.bind="{ format: 'DD/MM/YYYY', locale: 'fr' }">
</abp-datetime-picker>

There is no value attribute on this plugin so I don’t know if this is possible to validate it before submitting. Ideally I would have used the Aurelia validation plugin.

Another one:

<froala-editor value.two-way="post.content" 
               config.bind="froalaConfig"
               event-handlers.bind="froalaEvents">
</froala-editor>

I already tried to add & validate like this value.two-way="post.content & validate" but it doesn’t work.

Any help is greatly appreciated.

1 Like
2

You need a custom validate renderer which will know what to do with an element on validation changes

2 Likes
3

I got it working by using validation rules and also validation-errors custom attributes.

No custom renderer this time.

1 Like
4

Didn’t the GitHub demo with validation helped at all?

I’m not sure why you say

There is no value attribute on this plugin so I don’t know if this is possible to validate it before submitting. Ideally I would have used the Aurelia validation plugin.

The GitHub demo has validation and value.bind does exists, here’s the form validation View if you look carefully, it has the validation code (a simple validation of required)

<div class="form-group">
   <label class="control-label">Date Entered</label>
   <abp-datetime-picker with-date-icon="false" value.bind="dateEntered & validate" model.bind="myDateObject" options.bind="{ format:'YYYY-MM-DD HH:mm' }"></abp-datetime-picker>
</div>

The value is for the text value, while the model is to be used when you have an object model, that was designed for a flexibility in mind to have both value and model available at the same time in that plugin. However it brought some issues in the past, it is hard to maintain both of them in sync and in the past it brought some infinite loop issues (that was more on the abp-select plugin though), which I hope are fixed now.

I didn’t spend any time on these plugins as of lately, since I’m spending all my available time on Aurelia-Slickgrid, but the GitHub Demo does show a form validation example.

1 Like
5

Problem solved. I am still in a learning curve on aurelia validation so I was not aware of all the possibilities. Thanks anyway.

1 Like
6

This might be a perfect opportunity to create a PR in the docs repo for the validation plugin so others can benefit as well from your research

1 Like