Update the guide "Generate forms" with error handling

[Rednas83]

I am trying to raise an error as soon as the input value is different then "Rednas"


Tried:
data.name => works but of course if the name is set to name and only when in async because otherwise data is not initialized yet
@input="emit = $emit" => returns a function?

[justin-schroeder]

Hey Rednas83.

I'm not entirely sure what’s youre trying to achieve, but you should not be writing your own mechanism for validation, and there is no need to tap into the input event. Your example would be easily solved using vue formulate's validation rules.

<FormulateInput
  v-for=-"item in items"
  :key="item.name"
  v-bind="item"
  validation="in:Rednas"
  :validation-messages="{
    in: 'That username is already taken'
  }"
/>

If you actually want to check the status of validation from the backend, you would write a custom validation rule.

The error prop is only when you want to explicitly pass in an error value, usually from the backend on submission. It's rare that you would need it.

@andrew-boyd wrote a nice article that uses some custom validators if you need an example: https://blog.logrocket.com/easier-more-robust-vue-forms-with-vue-formulate/

Docs on this: https://vueformulate.com/guide/validation/#custom-validation-rules

I'm going to close this for now since there's no bug or feature request here, but happy to carry on the conversation.

[Rednas83]

Thanks for the example. That will work for me.

I only moved validation and validation-messages to items as well.

Also I figured out that I had to use $event instead of $emit to get the emitted value