CODEWITHSUNDEEP
validationvuejs2
Hawkeye64
Hawkeye64

Reputation: 637

Require at least one of two fields using vee-validate on VueJS 2.0

I am using vee-validate and I have two fields; one for Home Phone and one for Cell Phone. I don't need to make both 'required' for the rules, but what I need is at least one of these required.

So, my question, is it possible to set up a rule that checks both fields for input in at least one of them?

Upvotes: 5

Views: 11310

Answers (3)

Hawkeye64
Hawkeye64

Reputation: 637

Ok, didn't take long, but I have this working. It just took a bit of digging, so posting my answer so it can help others.

First, my input fields are homephone and cellphone and at least one of them is required.

This is achievable using the computed properties in Vue with the following:

computed: {
    isHomePhoneRequired() {
        if(this.cellphone === '')
            return true; // homephone is required
        return false;
    },
    isCellPhoneRequired() {
        // check if homephone is empty
        if(this.homephone === '')
            return true; // cellphone is required
        return false;
    }
}

and my HTML looks like the following:

<div class="form-group" :class="{'has-error': errors.has('homephone') }">
    <div class="label">Home Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
    <div ><input type="text" class="form-control" v-model="homephone" v-validate ="{ rules: { required: this.isHomePhoneRequired} }" data-vv-name="homephone" data-vv-as="Home Phone" /></div>
    <p class="text-danger" v-if="errors.has('homephone')">{{ errors.first('homephone') }}</p>
</div>
<div class="form-group" :class="{'has-error': errors.has('cellphone') }">
    <div class="label">Cell Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
    <div ><input type="text" class="form-control" v-model="cellphone" v-validate ="{ rules: { required: this.isCellPhoneRequired} }" data-vv-name="cellphone" data-vv-as="Cell Phone" /></div>
    <p class="text-danger" v-if="errors.has('cellphone')">{{ errors.first('cellphone') }}</p>
</div>

Notice that v-validate now gets an object passed containing the type (rules), the validation to use (required), and the computed property (isHomePhoneRequired).

Upvotes: 8

The Anh Nguyen
The Anh Nguyen

Reputation: 861

For anyone using Vee-Validate ValidationProvider by binding rules

homePhone will be required if cellPhone is null or empty string

<ValidationProvider
  v-slot="{ errors }"
  vid="homePhone"
  :rules="{
    required: !cellPhone || cellPhone.length === 0,
  }"
  name="Home Phone"
>

And same with cellPhone

<ValidationProvider
  v-slot="{ errors }"
  vid="cellPhone"
  :rules="{
    required: !homePhone || homePhone.length === 0,
  }"
  name="Cell Phone"
>

Upvotes: 0

KCP
KCP

Reputation: 949

I think using computed is not necessary, we can simply make it happen in HTML itself by checking condition on validating rules for another input model as below:

        <div class="form-group" :class="{'has-error': errors.has('homephone') }">
            <div class="label">Home Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
            <div ><input type="text" v-validate ="{ rules: { required: cellphone?false:true} }" class="form-control" v-model="homephone" data-vv-name="homephone" data-vv-as="Home Phone" /></div>
            <p class="text-danger" v-if="errors.has('homephone')">{{ errors.first('homephone') }}</p>
        </div>
        <div class="form-group" :class="{'has-error': errors.has('cellphone') }">
            <div class="label">Cell Phone<i class="fa fa-asterisk required" aria-hidden="true"></i></div>
            <div ><input type="text" v-validate ="{ rules: { required: homephone?false:true} }" class="form-control" v-model="cellphone" data-vv-name="cellphone" data-vv-as="Cell Phone" /></div>
            <p class="text-danger" v-if="errors.has('cellphone')">{{ errors.first('cellphone') }}</p>
        </div>

Upvotes: 4

Related Questions