How to apply input validation in React Hooks

Question

I am new to ReactJS Hooks. I searched out for a clear controlled form validation example but didn't get one. So I decided to write a simple question that anyone can easily understand it.

Assume I have a two input fields, type number and type text

const [values, set_values] = useState({first_input:'',second_input:''});

const handle_change = (e) => {
  let name = e.target.name
  let value = e.target.value;
  values[name] = value;
  set_values(values);
}

const test_validation () => {
  // I used to do it this way
  if(document.getElementsByName('first_input')[0].value==''){
    alert("first input is required")
  }
}

return(
  <div>
    <input onChange={handle_change} name='first_input' type='number' />
    <input onChange={handle_change} name='second_input' type='text' />

    <input type='submit' onClick={test_validation} />
  <div/>
)

Is it wrong to use pure JS to check the input's value and set conditions or is it preferred to use React validation forms?

I tried to set required attribute on input element tag so it can't be skipped but didn't work.

I need to alert() warning message for the required filed or highlight or focus on it.

@tksilicon he seems to have a pretty solid variable naming style convention that he's sticking to. It may be against YOUR convention, but YOUR way isn't THE way. document.getElementById is JS so it should work fine, although I can agree that part isn't a very good practice. — Barry Michael Doyle
– Barry Michael Doyle, Commented Apr 25, 2020 at 22:42

Barry Michael Doyle · Accepted Answer · 2020-04-25 22:46:13Z

2

Firstly, your update function isn't really working as it should.

Try this instead:

const handle_change = (e) => {
  let name = e.target.name
  let value = e.target.value;
  set_values({ ...values, [name]: value });
}

Then the better practice here is to make your <input /> elements controlled components.

Eg for first_input do this:

<input onChange={handle_change} name='first_input' type='number' value={values.first_input} />

Then your validation could look like this:

const test_validation () => {
  if(values.first_input === ''){
    alert("first input is required")
  }
}

This should successfully trigger the alert you were hoping for when the value is still an empty string.

edited Apr 25, 2020 at 22:46

answered Apr 25, 2020 at 22:40

Barry Michael Doyle

10.8k33 gold badges98 silver badges161 bronze badges

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

1 Comment

Ali Over a year ago

thank you, this worked, please consider up-voting the question so it can reach out for those who have similar issues

Josh · Accepted Answer · 2020-04-25 22:45:43Z

2

Your method of updating input values in the handle_change function is wrong. Values is a constant and cannot be modified directly. Use the ES6 spread operator with set_values to update the values.

set_values({...values, [name]:value});

answered Apr 25, 2020 at 22:45

Josh

8415 silver badges9 bronze badges

Comments

Simon Bruneaud · Accepted Answer · 2020-04-25 23:01:50Z

2

Here is a minimal example about how to handle validation:

Most of the time, you won't need to directly manipulate DOM API with React. Also make sure you do an e.preventDefault when you validate, otherwise the event will propagate due to event bubbling

import React, { useState } from "react";

export default function App() {
  const [values, setValues] = useState({ numberInput: "", textInput: "" });

  const validation = e => {
    if (values.numberInput === '' || !values.textInput) {
      e.preventDefault();
      alert("numberInput and textInput are required");
    }
  };

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          alert("submit ");
        }}
      >
        <input
          onChange={({ target }) => setValues({ numberInput: target.value })}
          name="numberInput"
          type="number"
        />
        <input
          onChange={({ target }) => setValues({ textInput: target.value })}
          name="textInput"
          type="text"
        />

        <input type="submit" onClick={validation} />
      </form>
    </div>
  );
}

edited Apr 25, 2020 at 23:01

answered Apr 25, 2020 at 22:47

Simon Bruneaud

2,6273 gold badges17 silver badges28 bronze badges

5 Comments

Barry Michael Doyle Over a year ago

if (!values.numberInput || values.textInput) translates to "if numberInput is undefined" OR "if textInput exists (even as an empty string)", "then do something".

Simon Bruneaud Over a year ago

Concerning e.preventDefault() if the form validation is ok we should just propagate the event. I guess

Barry Michael Doyle Over a year ago

That still doesn't cut it. Because !values.numberInput is not the same as values.numberInput.length > 0. !values.numberInput checks if values.numberInput is undefined. In this case, values.numberInput is '' (an empty string), which is NOT undefined.

Barry Michael Doyle Over a year ago

Fair enough you're correct about the e.preventDefault().

Barry Michael Doyle Over a year ago

tl:dr; This is what you want: if (values.numberInput === '' || values.textInput === "")

Collectives™ on Stack Overflow

How to apply input validation in React Hooks

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related