Log in

 import React, { useState } from 'react'




export default function FullFormFunction() {


   const[state,setState] =useState({
    form: {
     
        email: "",
        password: "",
        confirmPassword: "",
 
      },
      formErrors: {

        email: null,
        password: null,
        confirmPassword: null,
   
       
      }
   });

   
   var   handleChange = e => {

        const { name, value, checked } = e.target;
        const { form, formErrors } = state;
        let formObj = {};
       
          formObj = {
            ...form,
            [name]: value
          };
        //state for value

        if (!Object.keys(formErrors).includes(name)) return;
       
        let formErrorsObj = {};
        if (name === "password" ||
        name === "confirmPassword") {
          let refValue = state.form[
            name === "password" ? "confirmPassword" : "password"
          ];
          const errorMsg = validateField(name, value, refValue);
          formErrorsObj = { ...formErrors, [name]: errorMsg };
          // if (!errorMsg && refValue) {
          //   formErrorsObj.confirmPassword = null;
          //   formErrorsObj.password = null;
          // }
        } else {
          const errorMsg = validateField(
            name,
            name === "email" ?
             state.form["email"] : value
          );
          formErrorsObj = { ...formErrors, [name]: errorMsg };
        }
        setState({...state ,formErrors: formErrorsObj,form: formObj });
     
      };
   
    var  validateField = (name, value, refValue) => {
        let errorMsg = null;
        switch (name) {
          case "email":
            if (!value) errorMsg = "Please enter Email.";
            else if (
              !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                value
              )
            )
              errorMsg = "Please enter valid Email.";
            break;
         
          case "password":
            // refValue is the value of Confirm Password field
            if (!value) errorMsg = "Please enter Password.";
            else if (refValue && value !== refValue)
              errorMsg = "Password and Confirm Password does not match.";
            break;
          case "confirmPassword":
            // refValue is the value of Password field
            if (!value) errorMsg = "Please enter Confirm Password.";
            else if (refValue && value !== refValue)
              errorMsg = "Password and Confirm Password does not match.";
            break;
          default:
            break;
        }
        return errorMsg;
      };
   
    var  validateForm = (form, formErrors, validateFunc) => {
        const errorObj = {};
        Object.keys(formErrors).map(x => {
          let refValue = null;
          if (x === "password" || x === "confirmPassword") {
            refValue = form[x === "password" ? "confirmPassword" : "password"];
          }
          const msg = validateFunc(x, form[x], refValue);
          if (msg) errorObj[x] = msg;
        });
        return errorObj;
      };
   
     var handleSubmit = () => {
        const { form, formErrors } = state;
        const errorObj = validateForm(form, formErrors, validateField);
        if (Object.keys(errorObj).length !== 0) {
          setState({...state, formErrors:  errorObj  });
          return false;
        }

        //database
        //api code
        console.log("Data: ", form);
      };

  return (
    <>
        <div className="signup-box">
          <p className="title">Log In </p>
          <div className="row">
            <div className="col-md-6">
              <div className="form-group">
                <label>
                  Email:<span className="asterisk">*</span>
                </label>
                <input
                  className="form-control"
                  type="text"
                  name="email"
                  value={state.form.email}
                  onChange={handleChange}
                  onBlur={handleChange}
                />
                {state.formErrors.email && (
                  <span className="err">{state.formErrors.email}</span>
                )}
              </div>
              <div className="form-group">
                <label>
                  Password:<span className="asterisk">*</span>
                </label>
                <input
                  className="form-control"
                  type="password"
                  name="password"
                  value={state.form.password}
                  onChange={handleChange}
                  onBlur={handleChange}
                />
                {state.formErrors.password && (
                  <span className="err">{state.formErrors.password}</span>
                )}
              </div>
              <div className="form-group">
                <label>
                  Confirm Password:<span className="asterisk">*</span>
                </label>
                <input
                  className="form-control"
                  type="password"
                  name="confirmPassword"
                  value={state.form.confirmPassword}
                  onChange={handleChange}
                  onBlur={handleChange}
                />
                {state.formErrors.confirmPassword && (
                  <span className="err">{state.formErrors.confirmPassword}</span>
                )}
              </div>
            </div>
          </div>

          <div className="form-group">
            <input
              type="button"
              className="btn btn-primary"
              value="Submit"
              onClick={handleSubmit}
            />
          </div>
        </div>
       
      </>
  )
}

Comments

Post a Comment

Popular posts from this blog

Controlled Form

 import React, { useState } from "react"; function Form() {   const [formData, setFormData] = useState({ name: "", email: "" });   const [submittedData, setSubmittedData] = useState(null);   const handleChange = (e) => {     const { name, value } = e.target;     setFormData({ ...formData, [name]: value });   };   const handleSubmit = (e) => {     e.preventDefault();     setSubmittedData(formData);   };   return (     <div>       <h2>Controlled Form</h2>       <form onSubmit={handleSubmit}>         <input           type="text"           name="name"           placeholder="Name"           value={formData.name}           onChange={handleChange}         />      ...
Read more

LOCAL STORE

 //App.js import React from " react " ; import { Routes , Route } from " react-router-dom " ; import { ToastContainer } from " react-toastify " ; import " react-toastify/dist/ReactToastify.css " ; import LoginPage from " ./Pages/LoginPage " ; import UsersList from " ./Pages/UsersList " ; import HomePage from " ./Pages/HomePage " ; import Footer from " ./Components/Footer " ; function App () {   return (     < >       < ToastContainer         position = " top-center "         autoClose = { 2000 }         hideProgressBar = { false }         newestOnTop = { false }         closeOnClick         rtl = { false }         pauseOnFocusLoss         draggable         pauseOnHover       />       < Routes >   ...
Read more

NodeJS MongoDB

 server.js const mongoose = require ( 'mongoose' ); const dotenv = require ( 'dotenv' ); dotenv . config ({ path : './config.env' }); const app = require ( './app' ); // Require the Express app from app.js const DB = process . env . DATABASE ; // Connect to the database-------------------------------------- mongoose     . connect ( "mongodb://localhost:27017/nikedb" , {         useNewUrlParser : true ,         useUnifiedTopology : true ,         // Other options if needed     })     . then (() => {         console . log ( 'Database connection successful' );     })     . catch (( err ) => {         console . error ( 'Database connection error:' , err );     }); const port = process . env . PORT || 3000 ; app . listen ( port , () => {     console . log ( `App running on port ${ port } ` ); ...
Read more