I have a form where I need to establish specific rules.
For instance, consider the following code snippet:
<label class="form-label">Price range from</label>
<validation-provider rules="required_if:price_to" name="Price range from"
v-slot="{ errors }">
<input v-model="price_range_from" type="number" ref="price_from">
<span class="validation-error form-span">{{ errors[0] }}</span>
</validation-provider>
</div>
<div class="ml-2 w-100">
<label class="form-label">Price range to</label>
<validation-provider name="Price range to"
v-slot="{ errors }">
<input v-model="price_range_to" type="number" class="form-control"
ref="price_to" name="price_range_to">
<span class="validation-error form-span">{{ errors[0] }}</span>
</validation-provider>
From these form elements, I aim to define a custom rule with the following conditions:
- The
inputfield forprice_range_frommust berequiredif theprice_range_tofield is not empty. - The value in the
price_range_frominput cannot exceed the value in theprice_range_toinput. - This restriction applies both ways.
Incorporating a script to handle these validations:
import {ValidationProvider, ValidationObserver, extend} from 'vee-validate';
import * as rules from "vee-validate/dist/rules";
import {required} from 'vee-validate/dist/rules';
Object.keys(rules).forEach(rule => {
extend(rule, rules[rule]);
});
extend('required', {
...required,
message: 'This field is required'
});
I attempted to consult the documentation at [ but struggled to find guidance on creating custom rules.
If someone could provide an example that clarifies this concept, it would greatly assist me in advancing and developing more tailored rules.