4

I have three inputs jobApplyEmail, jobApplyPhone, jobApplyOther which I am validating with Vuelidate. Of these three inputs, users are required to enter at least one input. To achieve this I am using requiredUnless however it's not working for some reason.

Template repeated

    // Using bootstrap-vue
    <b-form-input
      id="jobApplyEmail"
      v-model="form.jobApplyEmail"
      type="email"
      :class="{ 'is-invalid': $v.form.jobApplyEmail.$error }"
      @blur="$v.form.jobApplyEmail.$touch()">
    </b-form-input>

Script

    import {
      required,
      email,
      requiredUnless
    } from 'vuelidate/lib/validators'
    data() {
        return {
          form: {
            jobApplyEmail: '',
            jobApplyPhone: '',
            jobApplyOther: ''
          },
        }
      },
    computed: {
        isOptional: () => {
          return (
            this.jobApplyEmail !== '' ||
            this.jobApplyOther !== '' ||
            this.jobApplyPhone !== ''
          )
        }
      },
    
    validations: {
        form: {
          jobApplyEmail: { required: requiredUnless('isOptional'), email },
          jobApplyOther: { required: requiredUnless('isOptional') },
          jobApplyPhone: { required: requiredUnless('isOptional') }
        }
      },

Cem Kaan
  • 2,086
  • 1
  • 24
  • 55
Simon
  • 653
  • 3
  • 14
  • 25

1 Answers1

4

I solved my question

    jobApplyEmail: {
      requiredIf: requiredUnless(function() {
        return (
          this.form.jobApplyPhone !== '' || this.form.jobApplyOther !== ''
        )
      }),
      email
    },

    jobApplyPhone: {
      requiredIf: requiredUnless(function() {
        return (
          this.form.jobApplyOther !== '' || this.form.jobApplyEmail !== ''
        )
      })
    },
    jobApplyOther: {
      requiredIf: requiredUnless(function() {
        return (
          this.form.jobApplyPhone !== '' || this.form.jobApplyEmail !== ''
        )
      })
    }
Simon
  • 653
  • 3
  • 14
  • 25