setCustomValidity support

[Sylvain Prat]

Maquette does not support setting custom validation error messages via setCustomValidity on input elements yet. By chance, it happens to work when I set a custom error message on the target of a oninput event handler but I know that I can't count on this in all cases.

I can probably prepare a pull request to add this feature, but I'm wondering how to model this feature in terms of node properties: via a customValidity attribute maybe?

[Johan Gorter]

I have never used setCustomValidity myself. I experimented with setCustomValidity a little bit, and I found that I could not get it to work on Chrome somehow.

I agree using a VNodeProperty customValidity would produce the most readable code in maquette, but given the arguments above, I am hesitant to add this to maquette yet. I would suggest using the following approach for now.

Use a custom utility function:

let updateCustomValidity = (element: HTMLInputElement, options, selector, vnodeProperties: VNodeProperties) => {
  element.setCustomValidity(vnodeProperties.customValidity || '');
}

and use it like this

h('input', { 
  type: 'text',
  placeholder: 'What is your name?',
  customValidity: isName(yourName) ? '' : yourName + ' is not a name!',
  afterUpdate: updateCustomValidity,
  afterCreate: updateCustomValidity,
  value: yourName,
  oninput: handleNameInput 
})

Live demo: https://stackblitz.com/edit/setcustomvalidity?file=helloworld.ts

[Sylvain Prat]

Thank you for the quick answer. I understand that it is a new API but it seems to be supported in all major browsers now (see https://caniuse.com/#feat=constraint-validation). Anyway, I'll use your code snippet for now, until it is implemented in maquette one day ;)