React Form validation with Material UI TextField And Typscript is not working

Question

I try to write a code of "sign up" page with MUI library using react with typescript. in each TextFeild tag I added "required" but on submit, the validation is not working. I looked for any other validation but I didn't find other way on MUI website. can you help me? thanks advance.

this is the sign up component code:

import * as React from 'react';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Link from '@mui/material/Link';
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import globals from '../../Utils/Globals';
import { useForm } from 'react-hook-form';
import axios from 'axios';
import notify from '../../Utils/Notify';
import { SysErrs } from '../../Utils/SysErrs';
import { UserModel } from '../../Models/UserModel';

 function Copyright (props: any): JSX.Element {    
    
  return (
    <Typography variant="body2" color="text.secondary" align="center" {...props}>
      {'Copyright © '}
      <Link color="inherit" href="https://mui.com/">
        Chana Kurtz
      </Link>{' '}
      {new Date().getFullYear()}
      {'.'}
    </Typography>
  );
  }
const URLregister = globals.urls.guest + "register/"
const theme = createTheme();

export default function SignUp() {

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const json = JSON.stringify(Object.fromEntries(data)); 
    console.log(json);
    axios.post(URLregister, data)
        .then(response => {
            notify.success(SysErrs.REGISTERD)
            // reset({})
            
        })
        .catch(error => {
            notify.error(SysErrs.EMAIL_IN_USE)
        })
    console.log({
      email: data.get('email'),
      password: data.get('password'),
    });
    
  };



  return (
    
    <ThemeProvider theme={theme}>
     
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <Box
          sx={{
            marginTop: 8,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }}
        >
          <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign up
          </Typography>
          <Box component="form" noValidate onSubmit={handleSubmit} sx={{ mt: 3 }}>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={6}>
                <TextField
                  autoComplete="given-name"
                  name="firstName"
                  required={true}
                  fullWidth
                  id="firstName"
                  label="First Name"
                  autoFocus
                />
                
              </Grid>
              <Grid item xs={12} sm={6}>
                <TextField
                  required={true}
                  fullWidth
                  id="lastName"
                  label="Last Name"
                  name="lastName"
                  autoComplete="family-name"
                  helperText="Min length must be 2 characters"
                  
                />
                </Grid>
              <Grid item xs={12}>
                <TextField
                  required={true}
                  fullWidth
                  id="userName"
                  label="User Name"
                  name="userName"
                  autoComplete="User-Name"
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  required={true}
                  fullWidth
                  id="email"
                  label="Email Address"
                  name="email"
                  autoComplete="email"
                />
              </Grid>
              <Grid item xs={12}>
                <TextField
                  required={true}
                  fullWidth
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  autoComplete="new-password"
                />
              </Grid>
              <Grid item xs={12}>
                <FormControlLabel
                  control={<Checkbox value="allowExtraEmails" color="primary" />}
                  label="I want to receive inspiration, marketing promotions and updates via email."
                />
              </Grid>
            </Grid>
            <Button
              type="submit"
              fullWidth
              variant="contained"
              sx={{ mt: 3, mb: 2 }}
            >
              Sign Up
            </Button>
            <Grid container justifyContent="flex-end">
              <Grid item>
                <Link href="#" variant="body2">
                  Already have an account? Sign in
                </Link>
              </Grid>
            </Grid>
          </Box>
        </Box>
        <Copyright sx={{ mt: 5 }} />
      </Container>
    </ThemeProvider>
  );
        }

Tea_Lover_418 · Accepted Answer · 2022-05-17 18:29:13Z

2

You need to wrap this with a FormControl component.

Further documentation here: form control

answered May 17, 2022 at 18:29

Tea_Lover_418

3163 silver badges12 bronze badges

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

Comments

Dharman · Accepted Answer · 2024-02-06 13:39:38Z

0

We need to manually create the validation. Why? Because we are defining our own onClick function. If you just remove the onClick function and use By default button with type submit. Browser validation will work.

edited Feb 6, 2024 at 13:39

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Feb 3, 2024 at 23:51

Sourabh Ranakoti

11 bronze badge

Comments

Aleksandr Murashov · Accepted Answer · 2024-03-27 23:23:57Z

0

I think the first thing to do is remove the noValidate attribute from the <Box>.

<Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>

answered Mar 27, 2024 at 23:23

Aleksandr Murashov

1

Collectives™ on Stack Overflow

React Form validation with Material UI TextField And Typscript is not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related