Чтобы реализовать валидацию, где одно из двух полей должно быть обязательно заполнено (или оба), вы можете использовать пользовательский валидатор в 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() будут проверены условия заполнения хотя бы одного из полей, а также прочие установленные правила валидации.
