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

Question

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?

Answer 1

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).

Answer 2

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>