[Vuejs]-Validation error message for password field not display in Vuejs?

by

0👍

✅

The $v.user.password.maxLength value is false when the validation fails (the character length exceeds the specified limit), but your <div> is only shown when the validation passes. The fix is to invert the condition in v-else-if:

<div v-else-if="$v.user.password.maxLength"> ❌
                ^

<div v-else-if="!$v.user.password.maxLength"> ✅

Also, your <input>.maxlength is set to the maximum character length, which not only prevents the user from exceeding the character limit, but also prevents the validation from failing, so you’d never see the error message. The fix there is to remove the maxlength binding:

<input :maxlength="maxpassword"> ❌
       ^^^^^^^^^^^^^^^^^^^^^^^^

<input> ✅

demo

Leave a comment