Plugin not supports multiple error messages?

[g-rodigy]

For example when use derictive x-validate.required.tel, error message always the same e.g. phone required.

[colinaut]

As it explains in the README, the plugin creates an automatic error message but you can create your own custom error message one of three ways:

• Add data-error-msg='custom error message' on input field itself
  • Add a sibling element with error-msg class and write your own error message there. The plugin searches all next siblings and will add the proper aria-errormessage linked id tags for you. This is also useful if you want some descriptive text or other element before the error message or if you want to use special styling to a specific error message.
  • Add an element with the correct id attribute anywhere on the page (id is error-msg-${name}) and it will use that.

NOTE: the automatic error message is based on the name of the input — if it is named "phone" then it will automatically add "phone required" if the input name is "work-phone" than it will write "work phone required" as it converts dashes and underlines to spaces.

[g-rodigy]

Thanks, I read the README and looked at the code a bit, so I decided to clarify. It still will be one message for any error. I mean when input empty it's field required, when wrong value e.g. field is incorrect.

[colinaut]

Ah yeah sorry I didn't get your meaning initially. Yeah the plug does not have that functionality currently. It's currently a simple boolean, either the validation passes or it doesn't. I'd need to make the validation have multiple states to make it work like this. I'll reopen this and label it as an enhancement request. I'll look into how feasible that would be to add.

[colinaut]

@g-rodigy In the mean time, you can get this to work with the following AlpineJS code which will switch the error msg text based on the value:

<input type="tel" name="phone" value="" required />
<div
    class="error-msg"
    x-text="($validate.value('phone') === '') ? 'field required' : 'valid phone number required' "
>
    field required
</div>