I'm creating a signup form which verifies if a login_id selected by the user is available on the server. This form is on bootstrapvue.
<b-form @submit="onSubmit" v-if="show" @reset="onReset" >
<b-form-group
id="signupInputGroup0"
label="Login:"
label-for="exampleInput0"
description="Choose a unique login id"
valid-feedback="Great! Your login id is unique"
invalid-feedback="Login id already exists. Please pick another login.">
<b-form-input
id="signupInput0"
type="login"
v-model="form.login"
required
placeholder="Enter a unique login id"
/>
<b-button variant="success" @click="onCheckAvailability">Check Availability</b-button>
</b-form-group>
...
My question now is regarding the call to onCheckAvailability. This function is going to call an API and set the valid status to LoginId field.
Am actually considering vuelidate to create validations for all form fields. Customize my own validation method call isUniqueLogin
validations:{
form: {
login: {
required,
isUniqueLogin: this.onCheckAvailability(this.login)
}, ...
In such a case, how do we pass this validation on click back to the form? I'm looking for a neat and elegant way of doing it. And also OK to use something else that can do this well.
Note: This is not a submit click. It's a simple field validation on click. Sometimes, using frameworks can be tedious if I don't understand the paradigms well.
Both <b-form-group> and <b-form-input> have a prop called state which accepts true if the value is valid, false for invalid, or null if not validated.
You would need to set this prop (on both <b-form-group> and <b-form-input>) to the result of the checkAvailability call.
Note that invalid-feedback and valid-feedback props are used on <b-form-group> not <b-form-input>