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 am trying to add validation to show warnings 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().

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:

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 am trying to add validation to show warnings 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().

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

• javascript
• reactjs
• checkbox
• ecmascript-6
• mapping

Share Improve this question Follow edited Mar 15, 2019 at 23:42 AlxL asked Mar 13, 2019 at 21:59 AlxLAlxL 13911 silver badge88 bronze badges 5

• How this onblur event will be caleed? – Maheer Ali Commented Mar 16, 2019 at 3:24
• from the input form like <input onblur={function}.... – AlxL Commented Mar 16, 2019 at 7:10
• Can you please give example in code.pen. By ment the line and adding the event which would only console.log('x') Then i can try to add functionality you want – Maheer Ali Commented Mar 16, 2019 at 9:08
• @AlxL I'm sorry, but the full code link does not work. Could you please fix it so that I can see the full ponent source? – Tomasz Kajtoch Commented Mar 20, 2019 at 12:49
• codesandbox.io/embed/8212q2pmw0?fontsize=14 – AlxL Commented Mar 21, 2019 at 14:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4 +50

Your general approach seems like it should work, just need the finesse for actually implementing the error states. A suggestion here though would be to update your !isSelected && this.state.currentData < this.props.min condition to allow for less than three to be selected but to display an error state to the user.

  ...
    } else {
      if (this.state.currentData >= this.props.min) {
        // this.setState({ currentData: this.state.currentData - 1 });
        // UPDATE:
        this.setState((state) => ({ currentData: state.currentData - 1 }));
      } else {
        event.preventDefault();
        // Don't force the box to be selected, show error state instead
        // Disable calls to filtering, sorting, etc. until error resolved
        // event.currentTarget.checked = true;
      }
    }
  }

Basic Implementation:

• Vanilla JavaScript: https://codepen.io/hollyos/pen/XGqryV
• React: https://codepen.io/hollyos/pen/EMpXdR