Conditional rendering error message failing when more than one possible error in vue3 with vuelidate

18 Views Asked by At

I have a simple section a vue3 form which I would like to perform some validation on. I would like to render an error message based on what error condition is being met. When there is only one error condition to be met - the error message renders fine. however when there are multiple possible error messages, only an empty div renders, regardless of what error is being met

<label for="first_name">First Name:</label>
<input type="text" id="first_name" name="first_name" required alpha v-model="firstName" @blur="v.firstName.$touch()">
<div v-if="v.firstName.$error" class="error">
  <p v-if="!v.firstName.$dirty">Please enter your first name.</p>
  <p v-else-if="!v.firstName.minLength">First name must be at least 2 characters long.</p>
  <p v-else-if="!v.firstName.alpha">First name can be characters only.</p>
</div>
  
<label for="last_name">Last Name:</label>
<input type="text" id="last_name" name="last_name" required alpha v-model="lastName" @blur="v.lastName.$touch()">
<div v-if="v.lastName.$error && v.lastName.$dirty" class="error">
  <p>Last name must be at least 2 characters long.</p>
</div>
<script>
import { required, minLength, helpers, alpha } from '@vuelidate/validators';
import useVuelidate from '@vuelidate/core';

export default {
    setup() {
    const v = useVuelidate();
    return { v };
    },
    data() {
        return {
            firstName: '',
            lastName: '',
        };
    },
    validations: {
        firstName: { required, alpha, minLength: minLength(2) },
        lastName: { required, alpha, minLength: minLength(2) },
    },
};
</script>

In this example, when i enter 1 letter into last_name, the apt error message "Last name must be at least 2 characters long."

however if nothing/less than 2 letters/a non-alpha character is entered into first_name, an empty div renders with no p text inside. here is the rendered html when i inspect

rendered html inspect

i would like to have the correct error message rendering

0

There are 0 best solutions below