Validator

[kevindeyne]

We want to be able to have a standard way of dealing with validations.

In HTML, I would expect it to do something like seen here:
https://semantic-ui.com/behaviors/form.html#/examples
https://designmodo.com/ux-form-validation/

In other words:

• Validations are done per form
• The fields affected are marked with an additional error CSS class.
• It should be possible to write a custom validation message
• Either a div is added after each form element with the message
• or a single div is added with error messages for that form:

<div class="ui error message">
  <ul class="list">
    <li>Please enter a value</li>
    <li>Please select a dropdown value</li>
    <li>Please check the checkbox</li>
  </ul>
</div>

I want us only to specify constraints once and have them be effective in both the front-end and back-end. I have not yet decided where it would make the most sense to have this constraint, but I am (as always) leaning towards the back end (giving you the ability to unit test the constraints more quickly).

Most of the validations should be simple:

• Min/Max length of string
• Min/Max value of a number, date range
• String value following a certain regex (certain common ones can perhaps be pre-defined)
  • RegexTemplate.EMAIL, for example. Avoid anything country-specific or something that can easily change over time.
• A value cannot be empty/must be selected
• Or something custom (which can likely only be checked serverside)

If possible, this should be stopped in JS first and then also verified serverside.

This should integrate with how we validate file upload max size.

[kevindeyne]

The location of validation messages/divs could be done on the front end, though the actual rules of what the validation would be should be on the backend.

Perhaps similar to existing thymleaf integration: https://stackabuse.com/spring-boot-thymeleaf-form-data-validation-with-bean-validator/

Though I'll be honest, it ties a lot to bean validation and is very verbose for what it is. I think I might want something simpler.

What about:

<form>
  <ul m:validation="all" /> <!-- for all validation errors listed; must be a ul if ="all" -->
  <p>
    <label>Username:</label>
    <input type="text" name="username"/>
  </p>
  <p m:validation="username"></p> <!-- for specific validation error for username -->
</form>

And then on the backend you could return ValidationError pojos somehow which can be either

• Min/Max length of string
• Min/Max value of a number, date range
• String value following a certain regex (certain common ones can perhaps be pre-defined)
• RegexTemplate.EMAIL, for example. Avoid anything country-specific or something that can easily change over time.
• A value cannot be empty/must be selected

Which are translatable to JS

or a custom one which only works on the backend?

[kevindeyne]

Added and merged in