I'm using VueJS2 with vuelidate library. I can validate the fields based on the validation objects. The validation will execute during computed time. But My validations objects is fixed, instead of dynamic. I have some fields will hide based on the selection.
import { validationMixin } from 'vuelidate'
import { required, maxLength, email } from 'vuelidate/lib/validators'
export default {
mixins: [validationMixin],
validations: {
company_name: { required },
company_position_title: { required }
},
methods: {
submit(){
this.$v.touch();
if(this.$v.$invalid == false){
// All validation fields success
}
}
}
}
HTML
<v-select
label="Who are you?"
v-model="select" // can be 'company' or 'others'
:items="items"
:error-messages="selectErrors"
@change="$v.select.$touch();resetInfoFields();"
@blur="$v.select.$touch()"
required
></v-select>
<v-text-field
label="Company Name"
v-model="company_name"
:error-messages="companyNameErrors"
:counter="150"
@input="$v.companyName.$touch()"
@blur="$v.companyName.$touch()"
v-show="select == 'Company'"
></v-text-field>
<v-text-field
label="Company Position Title"
v-model="company_position_title"
:error-messages="companyPositionErrors"
:counter="150"
@input="$v.companyPosition.$touch()"
@blur="$v.companyPosition.$touch()"
v-show="select == 'Company'"
></v-text-field>
<v-btn @click="submit">submit</v-btn>
Problem
When I select 'other' option and click submit, the this.$v.$invalid
is still true. It should be false as there is no validation fields required.
When I select 'company', that two fields must required and validated.
Dynamic validation is used to filter the valid choices based on the value entered/selected in some other field on the screen. For example, on a screen, say, you want to load the business partners who belong to a selected business partner group.
Vuelidate is a simple, lightweight, model-based validation library for Vue applications. Validation rules are added to a validation object where a given component is defined (instead of directly inside the DOM).
Using Vuelidate you can reset the validation errors by using this. $v. $reset() . In this Codepen example resetting the lastName field that uses a Vuetify component works - $invalid is true while $error is set to false.
Another way is using requiredIf
itemtocheck: {
requiredIf: requiredIf(function () {
return this.myitem !== 'somevalue'
}),
minLength: minLength(2) },
you need a dynamic validation schema
validations () {
if (!this.select === 'company') {
return {
company_name: { required },
company_position_title: { required }
}
}
}
More info: Dynamic validation schema
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With