Как сделать проверку в vuelidate, где одно из двух полей должно быть обязательным?

Question

[Виктор]

Есть два поля,
для перевода сообщений создал vuelidate_translate.js

import { helpers, required, maxLength, minLength} from '@vuelidate/validators';
import {trans} from "laravel-vue-i18n";
export const required$ = helpers.withMessage( trans('validation.required', { attribute:''} ), required)
export const maxLength$  = (max) =>  helpers.withMessage(
    ( { $params}) =>  trans('validation.max.string', { max:$params.max, attribute:''} ), maxLength(max)
)
export const minLength$ = (min) =>  helpers.withMessage(
    ({ $params}) => trans('validation.min.string', { min:$params.min, attribute:''} ), minLength(min)
)

<script setup>
import {useForm} from '@inertiajs/vue3';
import {ref} from "vue";
import {required$, maxLength$, minLength$} from './vuelidate_translate'
const form = useForm({
field_1: '',
field_2: '',
})
const rules = ref( {
    field_1: { required$ },
    field_2:{ required$ },
})
const v$ = ref(useVuelidate(rules, form))
 function validateTest(){
console.log(v$.value.$validate())
}
</script>
 <template>
<div>
<InputText input_type="text" v-model="form.field_1"/>
<InputText input_type="text" v-model="form.field_2"/>
</div>
 </template>

Как сделать проверку, где одно из двух этих полей должно быть заполнено?

Answer 1

[Максим Ткачев]

Чтобы реализовать валидацию, где одно из двух полей должно быть обязательно заполнено (или оба), вы можете использовать пользовательский валидатор в Vue и Vuelidate. Назовем это условие "orRequired", где по меньшей мере одно из двух полей должно содержать ненулевое значение.

Во-первых, добавим новый валидатор в ваш файл vuelidate_translate.js. Этот валидатор будет принимать два аргумента, которые представляют собой ссылки на два поля формы:

import { helpers } from '@vuelidate/validators';

export const orRequired = (siblingField) => {
  return helpers.withMessage(
    'По крайней мере одно из полей должно быть заполнено',
    function(value, parentVm) {
      return value || parentVm[siblingField];
    }
  );
}

Теперь внесем изменения в ваш файл с компонентом Vue, чтобы использовать этот новый валидатор. Для этого нам понадобится добавить новое правило для каждого поля, указывая другое поле как "siblingField". Например:

<script setup>
import {useForm} from '@inertiajs/vue3';
import {ref} from "vue";
import {required$, maxLength$, minLength$, orRequired} from './vuelidate_translate'

const form = useForm({
  field_1: '',
  field_2: '',
});

const rules = ref({
  field_1: { required$, orRequired$: orRequired('field_2') },
  field_2: { required$, orRequired$: orRequired('field_1') },
});

const v$ = ref(useVuelidate(rules, form));

function validateTest() {
  console.log(v$.value.$validate());
}
</script>

<template>
<div>
  <InputText input_type="text" v-model="form.field_1"/>
  <InputText input_type="text" v-model="form.field_2"/>
</div>
</template>

Здесь мы добавили новое правило orRequired$ для каждого поля, которое ссылается на другое поле формы. Этот валидатор проверяет, заполнено ли хотя бы одно из указанных полей.

В функции валидатора orRequired мы используем parentVm, который ссылается на объект формы, содержащий оба поля.
Это позволяет нам проверять значение второго поля в контексте первого.
При использовании локализации (например, trans из laravel-vue-i18n) может потребоваться адаптировать сообщения об ошибках под текущий язык пользователя, а также учесть контекст использования.
В вашем коде мы также учли возможность добавления других валидаций, таких как maxLength$ или minLength$, если это потребуется.
Теперь при вызове validateTest() будут проверены условия заполнения хотя бы одного из полей, а также прочие установленные правила валидации.

Comments

[Виктор]

Большое спасибо за такой развернутый ответ!

[Дмитрий Кузнецов]

как будто бы чатгпт ответил)