[Feature Request] Add enhanced validation docs by providing examples/best practices for conditional (Required or others) validators

[daKmoR]

Describe the bug

I want to force a

To Reproduce

You can see it in this codepen.
https://codepen.io/daKmoR/pen/rNxvorQ?editors=1000

Only if you enter something you will see the feedback. Even though I try to force it with submitted = true

Expected behavior

Error message should be shown also for empty strings if submitted = true (or some way to force it)

[tlouisse]

This is how we intentionally designed this, aligned with the platform.

In order to see a message, it needs to be in invalid state. An empty input (there was no user attempt to give a valid value) will not be regarded as invalid, unless the Required validator is applied .
The Required validator is mutually exclusive to the other validators.

See a platform example with the max validator on input[type=number]:

<input type="number" id="noValueSoNoError" max=2>
<input type="number" id="rangeOverflow" value="3" max=2>
<input type="number" id="required" required>

console.log('noValueSoNoError   (valid=true) ', noValueSoNoError.validity);
console.log('rangeOverflow      (valid=false)', rangeOverflow.validity);
console.log('noValueButRequired (valid=false)', required.validity);

See: https://jsfiddle.net/6xL8g9t5/

[tlouisse]

Ah wait, you already came to that conclusion: https://polymer.slack.com/archives/CJGFWJN9J/p1594306018390700 :)

I'm not sure whether an extra flag would be needed. I would like to align with platform.
Could it be solved via:

<lion-input .validators="${[new Required(null, { getMessage: () => 'custom'}), new MyCustomValidator()]}">

?

[j--w]

@tlouisse Yes that is very similar to what I ended up doing in the end, I'll post my use case from the slack thread here as well in case anyone else is searching for something similar:

"The use case I have is that some of the fields in the form end up going to a third party (from the endpoint that is handling the form payload) and they also validate the fields but some of their validation is conditional and is a black box to us, so far we’ve managed this by relaying the validation messages from the third party into a custom validator for each field that it decides is invalid. This has worked ok because all of the fields validated by the third party were required so they were always interacted with before we send the form.

But now we have a case where some of the fields are conditionally required so the idea was we would leave these as not required by default and when they’re submitted to the server if they are in fact required we would feed that back to the user through the lion validation mechanisms.

My workaround for this so far is after the server submits if a field comes back as invalid from the 3rd party we push a new custom validator in that extends Required so that it is shown to the user whether or not the form has been filled."

Thank you both for taking the time to chat about this in slack and on here, your efforts are appreciated and I love working with lion components so far!

[tlouisse]

Thanks for the reply.
So if I understand you correctly, you have something similar like the code below?

<lion-input .validators="${this._conditionalValidators}">

class ExtendedRequired extends Required {
   static getMessage() {
      return 'my custom message';
   }
}

...

if (requiredConditionMet) {
    this._conditionalValidators = [...this._conditionalValidators, new ExtendedRequired()]
}

I think this would be a good solution.
If you think there would be better ways still, let us know :)

Thank you both for taking the time to chat about this in slack and on here, your efforts are appreciated and I love working with lion components so far!

Thanks. That's great to hear!

[tlouisse]

I will leave this open, so we can add some better documentation for scenarios like these