Validating input fields in react

Question

I am new to react and created a login form with a few set of validations to raise errors in case of blank username or password. On the very first instance, when nothing is inserted and the Submit is clicked, it works fine. But once the value is changed with a value inserted by the user and then deleting from the text input, the variable gets a value of "" and never gets back to null value. This avoids my special treatment where I inserted !this.state.username. It gets stuck at that moment and the form submission goes anyway to the server. I have tried trim as well but it didn't work

class LoginClassComponent extends React.Component {


constructor(props) {
    super(props);
    this.state = {
      username: this.props.username,
      password: this.props.password,
      errorUsername: null,
      errorPassword: null,
    };

this.handleValidation = this.handleValidation.bind(this);
this.handleChange = this.handleChange.bind(this);

}

//assign textbox values to props
  handleChange = (e) => {
    this.setState({
      [e.target.name]: [e.target.value],
    });
  };
  //handle input validation
  handleValidation = (event) => {
    if (!this.state.username) {
      this.setState({ errorUsername: "Please enter User Name" });
      event.preventDefault();
    }

    if (!this.state.password) {
      this.setState({ errorPassword: "Please enter Password" });
      event.preventDefault();
    }

HermitCrab · Accepted Answer · 2020-04-16 17:43:38Z

1

Your handleChange is incorrect, you should remove the brackets around value:

handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

edited Apr 16, 2020 at 17:43

answered Apr 16, 2020 at 17:11

HermitCrab

3,2641 gold badge14 silver badges10 bronze badges

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

2 Comments

NKapoor Over a year ago

sorry, it didnt work. I applied below code < handleValidation = (event) => { console.log("USername: ", this.state.username) if (!this.state.username || this.state.username.length === 0) { //tried with 1 and 0 this.setState({ errorUsername: "Please enter User Name" }); event.preventDefault(); } > but when I am printing username it is still as below USername: [""]0: ""length: 1 proto: Array(0)

HermitCrab Over a year ago

I see, there is an error in your handleChange, I have updated my answer. You can also remove the second test once you make this change

Raz Chiriac · Accepted Answer · 2020-04-16 19:27:27Z

for this scenario I would go with function components and hooks, but for the sake of simplicity and not knowing what the rest of your implementation looks like, I'd go as follows. Assuming you are triggering handleValidation either on field blur or on submit click, try modifying it like so:

handleValidation = (event) => {
    event.preventDefault();
    let errorUsername = null;
    let errorPassword = null;
    if (event.target.name === 'username') {
        errorUsername = (event.target.value === '') ? "Please enter User Name" : null;

    } else if (event.target.name === 'password') {
        errorPassword = (event.target.value === '') ? "Please enter Password" : null;

    }
    this.setState({ errorUsername, errorPassword });
}

Let me know if you need any further assistance.

Cheers! 🍻

Collectives™ on Stack Overflow

Validating input fields in react

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related