Simple function to Validate checkboxes in reactJS

Question

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

Can you please give example in code.pen. By comment the line and adding the event which would only console.log('x') Then i can try to add functionality you want — Maheer Ali
– 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 component source? — Tomasz Kajtoch
– Tomasz Kajtoch, Commented Mar 20, 2019 at 12:49

HollyOS · Accepted Answer · 2019-03-24 02:09:24Z

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

edited Mar 24, 2019 at 2:09

answered Mar 16, 2019 at 1:56

HollyOS

4072 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomasz Kajtoch Over a year ago

Be aware that setState is asynchronous and accessing the previous currentData value as you did is not safe. You should write this.setState((state) => ({ currentData: state.currentData - 1 }));

Collectives™ on Stack Overflow

Simple function to Validate checkboxes in reactJS

1 Answer 1

Basic Implementation:

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Basic Implementation:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related