Validating fields in slots

Hi there!

What an excellent lib! There’s only one more hurdle to jump before the team adopts it.

When using a slot with an input for a field, I can’t seem to get the validator to recognize the updated model. Though the validator works on another field that’s generated by the lib. I don’t expect the field in the slot to output an error, but I would expect the validator to check the model based on the schema specifications so that valid === false.

Here’s a reproduction: https://codepen.io/joshhoegen/pen/jOMddvr

Despite being required and only accepting alpha chars, v-model="valid" isn’t updated based off of the model…

• Is this the intended design?
• Is there a recommended way I can ensure the form’s v-model returns false?

Thanks for the lib and all the insight you share!

[albanm]

Otherwise you have the right starting points. The solution would be something like that:

• in validatable.js, process the error messages by running this.rules and filtering those that return a string, probably move the computed property rules in the same mixin for clarity
• add the error messages to the slot params
• add a showValidation param in the slot params that would probably be (this.validated || this.shouldValidate)
• in computed property hasError manage 2 cases:
  • either there are children inputs then keep the current implementation
  • or check the length of error messages
• in the slot params in on.change set this.shouldValidate to true

I think that would do the trick while maintaining compatibility with the rest of the code. But I also think that using v-input is more in line with the framework.

[joshhoegen]

Cool! I see that in the first example, it works in an array. Couldn’t quite figure out how to with the plain string field, however I’m enamored with the “input” use case! ❤️