Form submit and validation with MaterialUI & ReactJS

Question

I'm moving from AntD to MaterialUI and can't figure out how to easily implement form validation AND form submission without reloading the whole page.

As an example, upon clicking "sign in" the whole page reloads, which isn't a good idea with an SPA app.

I can bypass that by moving the handleFunction from the element to the element's onClick function and removing the type="submit" from the Button so as not to reload the whole page. That works but it removes the validation and it removes the ability for the user to click "Enter" to submit the form.

Any idea how to achieve this? Below is what I have so far which works but without form validation and without being able to click 'enter' to submit the form:

    return (
    <Container component="main" maxWidth="xs">
        <CssBaseline/>
        <div className={classes.paper}>
            <Avatar className={classes.avatar}>
                <LockOutlinedIcon/>
            </Avatar>
            <Typography component="h1" variant="h5">
                Sign in
            </Typography>
            <form className={classes.form}>
                <TextField
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    id="email"
                    label="Email Address"
                    name="email"
                    autoComplete="email"
                    autoFocus
                    errorMessages={['this field is required', 'email is not valid']}
                    onInput={e => setEmail(e.target.value)}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    required
                    fullWidth
                    name="password"
                    label="Password"
                    type="password"
                    id="password"
                    autoComplete="current-password"
                    onInput={e => setPassword(e.target.value)}
                />
                <FormControlLabel
                    control={<Checkbox value="remember" color="primary"/>}
                    label="Remember me"
                />
                <Button
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                    onClick={onFinish}
                >
                    Sign In
                </Button>
                <Grid container>
                    <Grid item xs>
                        <Link to={"/forgotpassword1"} variant="body2">
                            Forgot password?
                        </Link>
                    </Grid>
                    <Grid item>
                        <Link to={"/register"} variant="body2">
                            {"Don't have an account? Sign Up"}
                        </Link>
                    </Grid>
                </Grid>
            </form>
        </div>

    </Container>
);

Answer 1

Register Card import React from 'react';

import { withRouter } from 'react-router-dom'



import { Grid, Paper, Avatar, TextField, Button } from '@material-ui/core'



class Register extends React.Component {
  state = { username: "", password: "", confirmPassword: "", location: "", phonenumber: "", email: "" };

  handleClickSignIn()
    {
      this.props.history.push("/Login");
    }


  validateEmail() {
    console.log("Validate Email fun enter")
    // var re = /\S+@\S+\.\S+/;
    // return re.test(email);
    if (this.state.email === "") {
      alert("Plsease Enter Validate number");
    }
  }
  validateNumber() {
    if (this.state.phonenumber < 10) { alert("Please enter your phone number"); }
  }

  validateUsername() {
    if (this.state.username === "") {
      alert("Please Enter username");
      return false
    }


  }
  validatePassword() {
    if (this.state.password < 6) { alert("Password must be at least 6 characters long."); }
  }
  validateLocation() {
    if (this.state.location ==="") { alert("Please enter your location "); }
  }
  onSubmit() {

    // this.validateUsername();

    var un = this.validateUsername();
    if (un ===false) {
      return
    }


    // this.validatePassword();
    // this.validateEmail();
    // this.validateNumber();
    // this.validateLocation();

    console.log(this.state.username, this.state.password);
    console.log(this.state.email);
    console.log(this.state.confirmPassword);
    console.log(this.state.location);
    console.log(this.state.phonenumber);

  }


  render() {
    const paperstyle = { padding: 30, height:'100', width: 350, margin: '20px auto' }
    const avatarStyle = { backgroundColor: '#00adb5' }
    const headerstyle = { margin: '10px 0' }
    const btstyle = { margin: '10px 0'  }
    const ttstyle={margin:'5px 0'}



   // const FormControlLabel = {fontSize:'5'}

    return (
      
      <Grid align='center' container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: '100vh' }}>
        <Paper elevation={10} style={paperstyle}>
          <Avatar style={avatarStyle}  > G</Avatar>
          <h1 style={headerstyle}>GILGAL</h1>
          <h2>Get Started Now</h2>
          <TextField label='Name'  fullWidth required style={ttstyle}
            onChange={event => {
                this.setState({username: event.target.value })
              }}

          />
          <TextField fullWidth label='Email '  style={ttstyle}
            onChange={
              event => {
                this.setState
                  (
                    {
                      email: event.target.value

                    })
              }} />


          <TextField label='Password'  type='password' fullWidth required  style={ttstyle}
            onChange={
              event => { this.setState({ password: event.target.value }) }
            }
          />
          <TextField label='Confirm Password' type='password' fullWidth required style={ttstyle}
            onChange={
              event => { this.setState({ confirmPassword: event.target.value }) }
            }
          />
          <TextField label='Phonenumber'  fullWidth required  style={ttstyle}
            onChange={
              event => { this.setState({ phonenumber: event.target.value }) }
            }

          />
          <TextField label='Location' fullWidth  style={ttstyle}
            onChange={
              event => { this.setState({ location: event.target.value }) }
            }
          />
         <input type="checkbox" id="agree" style={btstyle}  /><label htmlFor="agree"> I agree to the website's <b>Privacy Policy & Terms and condition</b></label>
        

          <Button  type='submit' onClick={this.onSubmit.bind(this)} color='primary' variant="contained" fullWidth  style={btstyle}>Register</Button>
       <div><p >  Already have an acount?
         < a href onClick={this.handleClickSignIn.bind(this)} >Log in</a>
         </p></div>
        </Paper>
      </Grid>
      
    );
   
  }

}
export default withRouter(Register)

Answer 2

We can achieve this by adding preventDefault while onSubmit.

handleSubmit:

const handleSubmit = e => {
    e.preventDefault();
    console.log("submit");
};

onSubmit:

<form className={classes.form} noValidate onSubmit={handleSubmit}>

Check the updated code in codesandbox

Answer 3

You can try it:

...

export default function SignIn() {
  ...
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [emailErrorText, setEmailErrorText] = React.useState("");
  const [passwordErrorText, setPasswordErrorText] = React.useState("");

  const onSubmit = e => {
    e.preventDefault();
    
    if (!email) {
      setEmailErrorText("Please enter email");
    } else {
      setEmailErrorText("");
    }
    if (!password) {
      setPasswordErrorText("Please enter password");
    } else {
      setPasswordErrorText("");
    }
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
        <form className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            type="email"
            fullWidth
            id="email"
            label="Email Address"
            name="email"
            autoComplete="email"
            autoFocus
            value={email}
            error={!!emailErrorText}
            helperText={emailErrorText}
            onChange={e => setEmail(e.target.value)}
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
            value={password}
            error={!!passwordErrorText}
            helperText={passwordErrorText}
            onChange={e => setPassword(e.target.value)}
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
          <Button
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
            className={classes.submit}
            onClick={onSubmit}
          >
            Sign In
          </Button>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
                Forgot password?
              </Link>
            </Grid>
            <Grid item>
              <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link>
            </Grid>
          </Grid>
        </form>
      </div>
      <Box mt={8}>
        <Copyright />
      </Box>
    </Container>
  );
}