Custom Validation on inputs

[Superpat]

Following a discussion on discord, I wonder if a data-custom-validation for input's would make any sense ? You can read about setCustomValidation here https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation

This would be useful for stuff like cross input validation, heres a small example:

<form data-on-submit="sse({method: "post",  contentType: "form"})">
    <input type="text" name="shortWord" data-bind="shortWord"></input>
    <input 
         type="text" 
         name="longWord"
         data-bind="longWord"
         data-custom-validation="shortWord.value.length < longWord.value.length ? '' : 'this word should be longer then the first'"
    ></input>
</form>

I dont mind trying to implement it myself, but I'll wait for validation ;) that it's a good idea first.

[bencroker]

I like the idea of using setCustomValidity(). The attribute name data-custom-validity would probably make more sense.

1. Add an event listener for input, change and keydown events.
2. When triggered, evaluate the expression and call setCustomValidity(result) on the result.

Is there anything else to account for?

[Superpat]

Hum, right, I think data-custom-validation was brain fog.

We just need to make sure there's decent default debouncing I think.

[bencroker]

I don’t think debouncing is necessary, as this would apply to form submission only, right?

Note that the message will not be displayed immediately. Attempting to submit the form will display the message, or you can call the reportValidity() method on the element.

[Superpat]

Well the warning is only shown when reportValidity() is used, but if the expression is going to be run on all input changes it might be a good idea to debounce it. I mean it could be a heavy calculation or even imply a network hop.

[bencroker]

I suppose we could evaluate the expression only on a form sse request.

[Superpat]

Hmm, I'd still like for stuff like `data-on-focusout="inputId.reportValidity()" to just work.

[bencroker]

In that case we could give data-custom-validity appropriate modifiers like debouncing, so you can decide the behaviour yourself. Feels better than picking an arbitrary debounce duration.

[bencroker]

Added in #423. If debouncing is required, it should be added using the data-on-* attribute instead.

<input data-on-keydown__debounce.400ms="ctx.el.setCustomValidity(`Invalid`)">