Tutorials

Form Validation in React js

November 01, 2021



According MDN, form is an "element represents a document section containing interactive controls for submitting information." In short, it allows users to submit information.

Form action and method

Let's go over method first. You will usually see two different form methods: GET and POST. A GET performs a GET HTTP method. If you want to code along, just create an html file and copy the path in your browser

  <!-- index.html -->
  <form  action="" method="get">
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
    <button type="submit">Submit</button>
  </form>

Btw, if we have "" (blank) action, we are telling our form to perform the HTTP request to the same URL. If I enter "test" as username and press submit, note that the URL changes to: form.html?user_name=test Doing GET request on HTML form will pass user input into query params.

When we do POST request, it will perform POST HTTP request to the page you define inside "action". Since we have "" as action, it will do POST HTTP request into this page.

Submiting form in React js

  import React from "react";
  import { useState } from "react";

  function App() {
    var [fName, vName] = useState("");
    var [eMail, vEmail] = useState("");

    function handelor(e) {
      e.preventDefault();
      console.log(fName, eMail);
    }
    return (
      <div>
        <form onSubmit={handelor}>
          <input
            type="text"
            placeholder="user name"
            onChange={(e) => vName(e.target.value)}
          />
          <input
            type="text"
            placeholder="email"
            onChange={(e) => vEmail(e.target.value)}
          />
          <button>Submit</button>
        </form>
      </div>
    );
  }

  export default App;

Form Validation in React js..

import React, { useState } from "react";
function Form() {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [error, setError] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (firstName.length == 0 || lastName.length == 0) {
      setError(true);
    }
    if (firstName && lastName) {
      console.log("First Name: ", firstName, "\nLast Name: ", lastName);
    }
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <div>
          <input
            placeholder="First Name"
            onChange={(e) => setFirstName(e.target.value)}
          />
        </div>
        {error && firstName.length <= 0 ? (
          <label>First Name can't be Empty</label>
        ) : (
          ""
        )}
        <div>
          <input
            placeholder="Last Name"
            onChange={(e) => setLastName(e.target.value)}
          />
        </div>
        {error && lastName.length <= 0 ? (
          <label>Last Name can't be Empty</label>
        ) : (
          ""
        )}
        <div>
          <button>Submit</button>
        </div>
      </form>
    </>
  );
}
export default Form;

show / hide with useState() Hook...

import React, { useState } from 'react';
import Para from './Para';

// import 'bootstrap/dist/css/bootstrap.min.css';
// import 'bootstrap/dist/css/bootstrap.min.js';


function App() {

  var [show, hide ]= useState(true);

  return (
    <div>

    {
      show === true  ? <Para /> : ""
    }

    <button onClick={()=>hide((prevState)=>!prevState)}>
      Show and Hide
    </button>

    </div>
  );
}

export default App;