React: How to tell if Form is Valid/Invalid

Question

How do I tell if a Form is Valid / Invalid in React?

Angular has this syntax on Formbuilders.

this.form.valid;

I am using this coding syntax. Curious if anything exists in the React library? Currently using Material UI Library.

Right now, I am doing if else statements and error checking all 10 fields. Looking for shorthand method.

https://onestepcode.com/creating-a-material-ui-form/

<form onSubmit={handleSubmit}>
      <Grid container alignItems="center" justify="center" direction="column">
        <Grid item>
          <TextField
            id="name-input"
            name="name"
            label="Name"
            type="text"
            value={formValues.name}
            onChange={handleInputChange}
          />
        </Grid>
        <Grid item>
          <TextField
            id="age-input"
            name="age"
            label="Age"
            type="number"
            value={formValues.age}
            onChange={handleInputChange}
          />

cuginoAle · Accepted Answer · 2022-08-29 11:55:36Z

5

To tell if a form content is valid or not - regardless the framework - you can simply use the following:

  const handleSubmit = (e) => {
    e.preventDefault();

    const formElement = e.target;
    const isValid = formElement.checkValidity();
    
    // add more logic here
  }

...

    <form
      action={action}
      onSubmit={handleSubmit}
      className={style.form}
    >
      <input type='email' name='email' />
      <input type='number' name='age' required />
    </form>

This will use the built-in validation function and will return true if the email is correct and the age is provided.

Please note that email is not 'required', i.e. an empty value is considered correct.

I just wrote an article where I discuss exactly this: form validation/submission using built-in validation API. No need to install any package!

https://medium.com/p/491327f985d0

edited Aug 29, 2022 at 11:55

answered Aug 29, 2022 at 8:40

cuginoAle

511 silver badge3 bronze badges

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

1 Comment

Victor Callegari Over a year ago

This is very clean and cool solution. I have not used it for very complex types of form but for simple forms where the required or error props are in, it works nice. Thank you.

Nathan · Accepted Answer · 2022-08-29 02:36:51Z

2

I'd recommend using a library called Formik. It takes a bit of time to learn, but it's a really powerful library, and I use it all the time now (with MUI).

answered Aug 29, 2022 at 2:36

Nathan

79.4k15 gold badges55 silver badges103 bronze badges

4 Comments

mattsmith5 Over a year ago

is there anything in the native react library however? will take a look then, thanks

Nathan Over a year ago

react doesn't usually build in features like that itself, it's just the core functionality.

mattsmith5 Over a year ago

ok, please add last comment into answer, thanks !

mattsmith5 Over a year ago

also, feel free to upvote question, thanks

marc_s · Accepted Answer · 2023-06-25 09:51:24Z

1

As far as I understood your problem, you want to validate the form, which can be done by checking if the states are valid or not.

function handleSubmit(e) {  
    e.preventDefault(); // to stop the form submission refresh the page

    // now you can check the the validation part

    // here are some sample validation that will check if the username has 5 

    // characters or not and checks if the age is greater than 18 or not.

    // validations
 
    if (formValues.name.length < 5) return; 
    if (formValues.age < 18) return;

    // if the code reaches this point then it is valid form 
sendToDb(); 
    // similar more functions or statements can be called
}

By checking the state value in the submission of the form it can be validated.

The above mentioned way is the manual way but if you want to validate it using a single line validation by using some third party library, then this is the solution that i would likely go with.

I found this package in npmjs it works fine. This is how you can use it.

1. Install the package.

npm install react-native-input-validator

2. Usage:

import TextInput from "react-native-input-validator";

<TextInput type="email"  ref={someReference}/>

// check the value is valid or not in the submission of the form by using 

//[reference].isValid() method


someReference.isValid();

Hope it helps thank you.

for more reference check the package and see the use in more details in the examples.

package : https://www.npmjs.com/package/react-native-input-validator

edited Jun 25, 2023 at 9:51

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Aug 29, 2022 at 2:50

user14093271

2 Comments

mattsmith5 Over a year ago

yeah, was hoping there a single line check, instead of doing if-then for all 10 of my form fields

user14093271 Over a year ago

@mattsmith5 check out the new edit i hope it helps.

Collectives™ on Stack Overflow

React: How to tell if Form is Valid/Invalid

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related