React: How to validate inputs upon submit in React?

Question

I am making an expense tracker that makes a list of expenses upon submit based of the values in an input. Right now I am wanting to validate if the inputs are empty or not and if they are I want alert the user that they need to fill in the required field. So far I've done this but can't get it to work so far

const addExpenses = () => {



 setExpense(prevState => {
      return [
        ...prevState,
        {
          id: uuidv4(),
          name: expenseName,
          amount: expenseAmount,
          type: expenseType
        }
      ];
    });
    if(expenseName === '') return;
    setExpenseName("");
    setExpenseAmount("");
  };

return (
    <>
      <div className="field">
        <label className="label">Expense name</label>
        <input
          value={expenseName}
          onChange={updateExpenseName}
          type="text"
          className="expense-name"
          placeholder="Expense name"
        />
      </div>
      <div className="field">
        <label className="label">Expense amount</label>
        <input
          value={expenseAmount}
          onChange={updateExpenseAmount}

          type="number"
          className="expense-amount"
          placeholder="Expense amount"
        />
      </div>

Read some tutorials and documentation for popular React form validation libraries. — sdgluck
– sdgluck, Commented Mar 19, 2020 at 15:00

moshfiqrony · Accepted Answer · 2020-03-19 15:15:08Z

1

First things first use some basic HTML validation. like bellow, I use a form and required in my input. By using this you cannot submit the form keeping anything empty

<form onSubmit={handleSubmit}>
  <input
    required
    type="text"
    className="expense-name"
    placeholder="Expense name"
  />

  <button type="submit">Submit</button>
</form>

but still, there are some validation like if use give any space so for that in your handleSubmit add some logic like bellow

const handleSubmit = () =>{
    //as example i am only showing for expenseName
    if(expenseName.trim().length === 0){
        alert('Wrong Input');
    }else{
        //do your job
    }
}

full-example

https://codesandbox.io/embed/dreamy-cherry-qt1qw?fontsize=14&hidenavigation=1&theme=dark

edited Mar 19, 2020 at 15:15

answered Mar 19, 2020 at 15:09

moshfiqrony

4,7833 gold badges23 silver badges32 bronze badges

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

Comments

Corentin de Maupeou · Accepted Answer · 2020-03-19 15:08:23Z

0

For detect if input is empty :

if(!(input == null || input == '')) {
 // Continue
}else{
  // Input is empty!
}

This example is not optimised, I know, but it works.

answered Mar 19, 2020 at 15:08

Corentin de Maupeou

1001 silver badge9 bronze badges

Collectives™ on Stack Overflow

React: How to validate inputs upon submit in React?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related