I have made a selection limit function which ensures that total checkbox is above min value and under max value, these values were taken from the JSON which the checkboxes are mapped from, now the selection limit works, but I want to add another validation function to show warnings, maybe using onblur, but I am not sure how can the same function can be translated into an onblur validation function. for example where if someone unchecks , it shows on the console that you need to select a minimum of 3 until 3 is checked, same logic as selectData(). any ideas would be appreciated.
Function
selectData(id, event) {
let isSelected = event.currentTarget.checked;
if (isSelected) {
if (this.state.currentData < this.props.max) {
this.setState({ currentData: this.state.currentData + 1 });
} else {
event.preventDefault();
event.currentTarget.checked = false;
}
} else {
if (this.state.currentData >= this.props.min) {
this.setState({ currentData: this.state.currentData - 1 });
} else {
event.preventDefault();
event.currentTarget.checked = true;
}
}
}
Full Code: https://codesandbox.io/embed/48o2jo2500?fontsize=14
Aucun commentaire:
Enregistrer un commentaire