Formik Material UI Log In Form

 import React, { useState } from "react";

import { Button, TextField, Box, Typography, Dialog } from "@mui/material";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";

export function MaterialForm() {
    const [openDialog, setOpenDialog] = useState(false);

    // Password validation schema
    const validationSchema = Yup.object({
        email: Yup.string().email("Invalid Email").required("Please enter your email"),
        password: Yup.string()
            .min(8, "Password must be at least 8 characters")
            .max(20, "Password must not exceed 20 characters")
            .matches(/[a-z]/, "At least one lowercase letter required")
            .matches(/[A-Z]/, "At least one uppercase letter required")
            .matches(/[0-9]/, "At least one number required")
            .matches(/[@$!%*?&]/, "At least one special character required")
            .required("Please enter your password"),
    });

    return (
        <Box sx={{ width: 500, mx: "auto", mt: 5, p: 3, border: "1px solid #ddd", borderRadius: 2 }}>
            <Typography variant="h5" align="center" gutterBottom>
                Login
            </Typography>

            <Formik
                initialValues={{ email: "", password: "" }}
                validationSchema={validationSchema}
                onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
            >
                {({ errors, touched, handleChange, handleSubmit }) => (
                    <Form onSubmit={handleSubmit}>
                        <TextField
                            fullWidth
                            label="Email"
                            name="email"
                            margin="normal"
                            onChange={handleChange}
                            error={touched.email && Boolean(errors.email)}
                            helperText={touched.email && errors.email}
                        />

                        <TextField
                            fullWidth
                            label="Password"
                            name="password"
                            type="password"
                            margin="normal"
                            onChange={(e) => {
                                handleChange(e);
                                setOpenDialog(true); // Show password rules when typing
                            }}
                            error={touched.password && Boolean(errors.password)}
                            helperText={touched.password && errors.password}
                        />

                        {/* Password Validation Rules Dialog */}
                        <Box sx={{ p: 2 }}>
                            <Typography>Password must contain:</Typography>
                            <ul>
                                <li>✅ At least 8 characters</li>
                                <li>✅ One uppercase letter (A-Z)</li>
                                <li>✅ One lowercase letter (a-z)</li>
                                <li>✅ One number (0-9)</li>
                                <li>✅ One special character (@$!%*?&)</li>
                            </ul>
                        </Box>


                        <Button type="submit" fullWidth variant="contained" sx={{ mt: 2 }}>
                            Log In
                        </Button>
                    </Form>
                )}
            </Formik>
        </Box>
    );
}

Comments

Post a Comment

Popular posts from this blog

App 1st User Define Component

  import logo from './logo.svg' ; import './App.css' ; import React from "react" ; function App () { let products=[ 1 , 2 , 3 , 4 , 5 , 6 ] ; return <> <h1> Sabirs </h1> { products. map ((item)=>( <ProdoctCard src = {item} /> )) } </> ; } export default App ; function ProdoctCard ({src}) { return <img src = { `./img/ ${src} .webp` } /> ; }
Read more

Example 1

 //====================Component A================== import React , { useState } from "react" ; import B from "./B" ; export default function () { const [name , setName]= useState ( null ) ; return ( <div> <h1> A component </h1> <input value = {name} onChange = {(event)=>setName(event. target . value )} placeholder = { 'Please input name' } /> <h1> {name} </h1> <hr/> <B a = {name} setA = {setName} /> </div> ) }  //====================Component B================== export default function (obj) { //{a,setA} return ( <div> <h1> B component </h1> <input value = {obj. a } onChange = {(event)=>obj. setA (event. target . value )} placeholder = { 'Please input name' } /> <h1> {obj. a } </h1> <hr/> </div> ) }
Read more

Rabiit

Image
   ///==========================Css============== . box-pos { position : relative ; height : 200 px ; backgroundColor : "#e9ecef" ; } . rabit { position : absolute ; bottom : 19 px ; } . start-game-panel { background : #000000bf ; position : absolute ; top : 0 px ; bottom : - 13 px ; right : 0 px ; left : 0 px ; display : flex ; justify-content : center ; align-items : center ; } . img-d { width : 400 px ; } ====================React JS Componant================= import React , { useState , useRef } from "react" ; import "bootstrap/dist/css/bootstrap.min.css" ; import "./rabit.css" ; import "./test.css" ; //============Main Componant export function TestGame () { const [isGameOver , setIsGameOver]= useState ( false ) ; const [isGameStart , setIsGameStart]= useState ( false ) ; const [rabitPos , setRabitPos]= useState ( 0 ) ; const [score , setScore]= useState (...
Read more