0

I'm building a small rails/vite/react/material UI project, and I've got a login form built, with client-side validation that basically just makes sure the fields have been set, and if not, will set the helper text with an error message and bail from any api call.

See screenshots and component code below 👀 🎨

Right now I'm doing everything from scratch, e.g, setting the state on for each field onChange, and then onClick (for button) running a validation that checks if the state for each of these fields is correct.

Question

I know this is the "typical" way of doing these things in react, but does anyone have a favorite front-end validation library they like to use with React and Material UI in Production? Do these front-end validation libraries feel like they speed up your build time?

Login.jsx (Example component)

On Page Load

Before client-side validation

On Failed Validation

After client-side validation

Component Code

import React from 'react';
import { Link } from 'react-router-dom';
import Button from "@mui/material/Button";
import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";
import Item from "@mui/material/Grid";
import LoginIcon from "@mui/icons-material/Login";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";

import "./Login.scss";
const Login = () => {
  const [name, setName] = React.useState();
  const [password, setPassword] = React.useState();
  
  const [nameError, setNameError] = React.useState();
  const [passwordError, setPasswordError] = React.useState();
  
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  const handleLoginSubmit = () => {
    setIsSubmitting(true);
    clearPreviousErrors();

    if (!validateForm()) {
      setIsSubmitting(false);
      return;
    }

    // TODO: Submit POST request to /api/v1/users/login
    setTimeout(() => {
      setIsSubmitting(false);
    }, 3000);
  };

  const validateForm = () => {
    if (!name) setNameError("Name is required");
    if (!password) setPasswordError("Password is required");
    return name && password ? true : false;
  };

  const clearPreviousErrors = () => {
    setNameError();
    setPasswordError();
  }

  return (
    <Container maxWidth="md" className="Login">
      <h2>Login</h2>
      <Grid container spacing={2}>
        <Grid item xs={12}>
          <Item>
            <TextField
              id="outlined-basic"
              label="Name"
              placeholder="Name"
              variant="outlined"
              onChange={(e) => setName(e.target.value.trim())}
              error={nameError !== undefined}
              helperText={nameError}
              required
              fullWidth
            />
          </Item>
        </Grid>
        <Grid item xs={12}>
          <Item>
            <TextField
              id="outlined-basic"
              label="Password"
              placeholder="Password"
              variant="outlined"
              onChange={(e) => setPassword(e.target.value.trim())}
              error={passwordError !== undefined}
              helperText={passwordError}
              required
              fullWidth
            />
            <Stack direction="row" spacing={2} className="Login__button-group">
              <Button
                variant="contained"
                size="large"
                endIcon={<LoginIcon />}
                onClick={handleLoginSubmit}
                disabled={isSubmitting}
              >
                Login
              </Button>
              <Link to="/register" className="Login__register">
                Register
              </Link>
            </Stack>
          </Item>
        </Grid>
      </Grid>
    </Container>
  );
};

export default Login;

3
  • 1
    Probably stackoverflow.com will be better place to ask this question. Feb 20, 2023 at 21:24
  • @RomeoNinov Unfortunately SO doesn't allow asking for recommendations... :( See link.
    – twk
    Feb 21, 2023 at 7:10
  • In such case change your question, because "favorite" imply opinion based answer which IMHO will not be accepted here too. Feb 21, 2023 at 7:17

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.