required_if:anotherfield,value rule not working
dper94 opened this issue · comments
Hi guys, i have two select elements, one for hours and another for minutes, i am doing a recipes app so the user have to select the necessary time to complete the recipe. I want to require the minutes input only if the hours input is 0 because you cant complete a recipe in 0 hours and 0 minutes :P so i am using the required_if:anotherfield,value rule to do that but it is not working, what am I doing wrong? this is my component:
import { Form } from 'react-validify';
import Input from './Input';
import Select from './Select';
import './CreateRecipe.css'
import '../../bootstrap.min.css';
class CreateRecipe extends Component {
state = {
timeHours: [0,1,2,3,4,5,6,7,8,9,10,
11,12,13,14,15,16,17,18,19,20,21,22,23,24],
timeMinutes: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,
21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40
,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59],
difficulties: ["Easy","Medium","Hard"]
}
render() {
let timeHourSelect = this.state.timeHours.map((hour, index) => (
<option key={index} value={hour}>{hour + " hours"}</option>
));
let timeMinutesSelect = this.state.timeMinutes.map((minute, index) => (
<option key={index} value={minute}>{minute + " minutes"}</option>
));
let difficulty = this.state.difficulties.map((difficulty, index) => (
<option key={index} value={difficulty}>{difficulty}</option>
));
return (
<div className="container">
<div className="row">
<div className="offset-md-3 col-md-6">
<h1 className="create-recipe__header">Create a Recipe</h1>
<Form
rules={{
recipeName:'required|min:3',
ingredients:'required|min:3',
description: 'required|min:10',
timeMinute: 'required_if:timeHour,0'
}}
errorMessages={{
'required.recipeName': 'You have to provide a name for the recipe',
'min.recipeName': 'The name must contain at least 3 characters',
'required.ingredients': 'You have to provide the ingredients',
'min.ingredients': 'The ingredients must contain at least 3 characters',
'required.description': 'You have to provide a description',
'min.description': 'The description must contain at least 10 characters',
'required_if.timeMinute': 'You cant prepare a recipe in 0 minutes :)'
}}>
<div className="form-group">
<label for="recipeName">Recipe name</label>
<Input className="form-control" name="recipeName" id="recipeName" placeholder="Hamburger with cheese" />
<label for="ingredients">Ingredients</label>
<Input className="form-control" name="ingredients" id="ingredients" placeholder="bread x2, cheese x2, tomatoe, kitchen" />
<label for="description">Description</label>
<Input className="form-control" name="description" id="description" placeholder="Instructions on how to do it" />
<label for="difficulty">Difficulty</label>
<Select className="form-control" name="difficulty" id="difficulty">
{difficulty}
</Select>
<label for="time">Time to complete</label>
<div className="row">
<div className="col-md-6">
<Select className="form-control" name="timeHour" id="time" >{timeHourSelect}</Select>
</div>
<div className="col-md-6">
<Select className="form-control" name="timeMinute">{timeMinutesSelect}</Select>
</div>
</div>
</div>
<div>
<button submit className="btn btn-success">Submit <i class="fas fa-arrow-circle-right"></i></button>
</div>
</Form>
</div>
</div>
</div>
)
}
}
export default CreateRecipe;
Hmm, this might be more of a question for the validator.js library, unless if @audiolion has any ideas.
Ok thank you anyways i will wait @audiolion response :)
I got it, it seems to be a bug with the validatorjs library, the rule is working but only in the blur event, i mean when you touch the field you want to compare the value.
ah, ok this isnt a bug with their library actually, i think we ran into this before a while ago but didnt have a good solution. I'll talk to @audiolion and see what we can do to make it work
Ok thank you very much.
if you can make a https://codesandbox.io that demonstrates the undesired behavior it would help a lot @diegoper94
I cant do it right now but the normal behavior should be that when you click submit all errors appears and no when you touch the element. All rules are having a normal behavior but required_if:anotherfield just applies the validation when i touch the select element, if i hit submit without touching the element nothing happends. Sorry for my english i am from Venezuela.
See the image, the red section, when the user tries to submit the form with 0 hours and 0 minutes i want the required_if:anotherfield,value rule to send the error but nothing happens, however if i change the HOUR element from 0 hours to whatever lets say 1 hours and put it again in 0 and try to submit THEN the error appears.
It's possible the error is from validator.js thinking 0 == undefined.
It appears that the bug is in this library :( because all rules that require access to other fields values dont work. Like same:attribute, confirmed, etc.
I'm going to close this, since the way dependent rules are done is different now, and works correctly