i want to validate my form by checking if all the fields are filled. I am quite new to react. Any suggestions? I have got the states ready, but i am pretty much stuck. Thank you in advance for your replies. I appreciate it

my code:

const [fields, setFields] = useState({
    name: '',
    email: '',
    subject: '',
    msg: '',
});
const handleSubmit = (event) => {
    emailjs.sendForm().then(
        (result) => {
            console.log(result.text);
        },
        (error) => {
            console.log(error.text);
        }
    );
    alert('form submitted');
    event.target.reset();
    event.preventDefault();
};
<form onSubmit={handleSubmit}>
    <div className={styles.firstInputs}>
        <div>
            <label>name</label>
            <br />
            <input
                type='text'
                refs='name'
                name='name'
                placeholder='your name'
            ></input>
        </div>
        <div>
            <label>email</label>
            <br />
            <input type='email' name='email' placeholder='email'></input>
        </div>
    </div>
    <label>subject</label>
    <br />
    <input
        type='text'
        name='subject'
        placeholder='subject'
        className={styles.subject}
    ></input>{' '}
    <br />
    <label>message</label> <br />
    <textarea placeholder='your message' name='message'></textarea>
    <br />
    <button type='submit' className={styles.sendForm}>
        SUBMIT
    </button>
</form>;

CodePudding user response：

You are not using your state correctly there.

Set the values of the fields to what is in the state, then change the state when the fields change.

Don't forget you can just add the required attribute to your HTML element to make sure it gets some kind of value.

Then you just validate the state before submission.

Don't just fall back on packages all the time as people suggest here. As you say, you are new to React so, learn to set things up manually (which is basically less work for small forms). Once you understand that, then consider if having another dependency is really saving you time.

See sample code below in action here: https://codesandbox.io/s/form-validation-pbbf1

import { useState } from "react";
import "./styles.css";

const defaultFields = { name: "", email: "", subject: "", message: "" };

export default function App() {
  const [fields, setFields] = useState(defaultFields);

  const handleSubmit = (event) => {
    // Stop form from resetting
    event.preventDefault();

    // Check fields
    if (fields.name.length < 2) {
      return alert("Name should be greater than 1 character.");
    }

    // etc...

    // Send off data
    /*
    emailjs.sendForm().then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
      );
      */

    // I would probably put these two
    // lines inside the then block above.
    setFields(defaultFields);
    alert("form submitted");
  };

  const handleFieldChange = (e) => {
    const { name, value } = e.target;
    setFields((previousFields) => ({ ...previousFields, [name]: value }));
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* NAME */}
      <div>
        <label>name</label>
        <br />
        <input
          type="text"
          name="name"
          placeholder="your name"
          value={fields.name}
          required
          onChange={handleFieldChange}
        ></input>
      </div>

      {/* EMAIL */}
      <div>
        <label>email</label>
        <br />
        <input
          type="email"
          name="email"
          placeholder="email"
          value={fields.email}
          required
          onChange={handleFieldChange}
        ></input>
      </div>

      {/* SUBJECT */}
      <div>
        <label>subject</label>
        <br />
        <input
          type="text"
          name="subject"
          placeholder="subject"
          value={fields.subject}
          required
          onChange={handleFieldChange}
        ></input>{" "}
        <br />
      </div>

      {/* MESSAGE */}
      <div>
        <label>message</label> <br />
        <textarea
          placeholder="your message"
          name="message"
          value={fields.message}
          required
          onChange={handleFieldChange}
        ></textarea>
      </div>

      <button type="submit">SUBMIT</button>
    </form>
  );
}

CodePudding user response：

I think formik is great package to handle forms with yup for error validation

CodePudding user response：

You could take 2 different approaches.

Manual

By just adding simple if statements to check if the value is valid you can be as specific as you want to be. The downside is that is probably a lot of work and quite cumbersome

if(typeof fields.name === 'string' && fields.name.lenght >= 3) { /** continue **/ } else { return /** or show some type of message to the user **/} 

Library

This is what I would recommend. Look into libraries like formik and react hook form