How to hide el-form-item__error after field valid?

Question

vue 3.2.31

vee-validate 4.5.10

element-plus 2.1.6

On input event, it shows validation error message properly. But on blur event, it shows is required error message. Also on blur event, even if validation succeeded, it shows is required error message. But when form valid, meta.valid is true and vice versa.

On that time console like follows:

My code:

<VeeForm v-slot="{ isSubmitting, meta }" @submit="submitForm" ref="loginFormObserver" as="div">    
        <el-form :model="loginForm" ref="loginForm" name="loginForm" size="small" label-position="left" label-width="30%">    
            <VeeField :rules="'required|email'" name="Username" v-slot="{ field, errorMessage }">    
                <el-form-item :error="errorMessage" label="Username" required>    
                    <el-input v-model="loginForm.username" type="email" clearable status-icon v-bind="field">
                    </el-input>    
                </el-form-item>    
            </VeeField>    
            <el-form-item class="text-center">    
                <el-button class="login-btn" native-type="submit" type="primary" :disabled="!meta.valid || isSubmitting">{{ trans('common.login') }} </el-button>    
            </el-form-item>    
        </el-form>    
    </VeeForm>

If I avoid required attribute fromel-form-item, it works properly. But it removes red asterisk (star) beside labels of required fields.

Answer 1

This might be element-plus validation causing the confusion. You can disable their validation with: :validate-event="false". Which should give you the asterisk and remove the validation behavior from element-plus.

<el-input v-model="loginForm.username" type="email" clearable status-icon v-bind="field" :validate-event="false"></el-input>