Add more renderers

[plwalters]

Add more renderers to cover bootstrap scenarios such as a custom attribute to crawl the DOM and locate all properties that are being validated and show errors if needed.

Also would be nice to have renderers for other style frameworks as well.

[brandonseydel]

Are you thinking about something where you just provide the class to add to parent / self / sibling and provide a different selector for each? (cover all frameworks) What about appending * or span to a specified selector if field is required as an option. e.g. First Name -> First Name*

[Einarsson]

I'll gladely add some nice renderers, however currently it isn't possible to configure the plugin in regards to what renderer to use.

Love this new lib btw.

[brandonseydel]

@Einarsson You will need to add that functionality in which would be part of the enhancement.

[plwalters]

We plan to get this in before this coming Tuesday so if anyone wants to take a stab I can give some guidance

[brandonseydel]

@PWKad Can you comment on my approach vs multiple renderers (which still could be done) Also you are wanting to display an aggregation of data errors by configuration?

[32graham]

@PWKad I'm interested in creating a ValidationRenderer for the Polymer Paper Elements.

I just got it working for paper-input by changing the existing validation-renderer.js file in my jspm_packages directory. Obviously this is not where I need to be coding though 😄

Is there any guidance on where to put community written ValidationRenderer's? Will each community renderer be it's own package? Will the community build one package that exports many different renderers? Something else?

[plwalters]

@brandonseydel We want to have the renderer pulled in using DI from the container. This will allow using different renderers all over the place. Hope to get this in place (pulling renderer from container) ASAP.

@32graham we plan to have a few renderers available by default although we aren't sure exactly how to structure it just yet. I appreciate the help with getting the paper one in place and I'll be sure to ping back here with a more long-term approach ASAP.

[plwalters]

@brandonseydel @32graham how does this look -

main.js

import {CustomRenderer} from './custom-renderer';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validatejs', config => {
      config.setRenderer(CustomRenderer);
    });

  aurelia.start().then(a => {
    a.setRoot('app');
  });
}

for setting up a renderer globally?

You can also set it up on a per-component basis but I'm still thinking of the best way of handling this.

[Einarsson]

Looks good @PWKad

[plwalters]

@Einarsson cool thanks for the feedback I've just created a branch with those changes in it if everyone likes that for now I'll merge shortly

[32graham]

@PWKad As far as setting a global renderer goes this seems great.

[forestmarie]

@PWKad I second that approach for setting the global renderer.