How to validate username and password for my form?

Question

I have created a form with two field username and password and both are number username has length of 3 and password has a length of 6 .Could someone help me with validation.Such that if user enter a username of length less than 3 it should show a message and if somone shows password less than or greater than 6 it should show a message

import withRoot from './modules/withRoot';
// --- Post bootstrap -----
import React, { useState } from 'react';
import history from './history';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Link from '@material-ui/core/Link';
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import { Field } from 'react-final-form';
import Typography from './modules/components/Typography';
import AppFooter from './modules/views/AppFooter';
import AppAppBar from './modules/views/AppAppBar';
import Axios from 'axios';
import AppForm from './modules/views/AppForm';
import Button from '@material-ui/core/Button';
import { Alert } from 'react-bootstrap';
import { email, required } from './modules/form/validation';
import RFTextField from './modules/form/RFTextField';
import FormButton from './modules/form/FormButton';
import FormFeedback from './modules/form/FormFeedback';
import TextField from '@material-ui/core/TextField';
import Home from './Home';
import Dashb from './Dashb';



const useStyles = makeStyles((theme) => ({
  form: {
    marginTop: theme.spacing(6),
  },
  button: {
    marginTop: theme.spacing(3),
    marginBottom: theme.spacing(2),
  },
  feedback: {
    marginTop: theme.spacing(2),
  },
}));

export default function SignIn() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [status, setStatus] = useState(true);
  const classes = useStyles();
  let demo;
  function validateForm() {
    return username.length > 0 && password.length > 0;
  }

  function setIncorrect() {
    setStatus(false);
  }



  function setCorrect() {
    setStatus(true);
  }


 


  async function handleSubmit(event) {
    event.preventDefault()
  
    let user = await Axios.get(
      'http://localhost:9000/admin-service/admin/check/' +
        username +
        '/' +
        password
    )
      .then(response => {
        demo = response.data
        if (demo == true) {
          history.push('/admin');
          console.log('####')
          
        } else{
          console.log('not true')
          Functions();
      }
      })
      .catch(error => {
        console.log(error.response.data)
        setIncorrect()
      })
  }

  function Functions() {
    alert("PLEASE ENTER CORRECT CREDENTIALS!!!!!!!!!!")
}

  return (
    <React.Fragment>
      <AppAppBar />
      <AppForm>
        <React.Fragment>
          <Typography variant="h3" gutterBottom marked="center" align="center">
            Admin Sign In
          </Typography>
        </React.Fragment>

        <form onSubmit={handleSubmit} className={classes.form} noValidate>
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            id="username"
            label="Username"
            name="username"
            autoFocus
            onChange={e => { setUsername(e.target.value); setCorrect() }}
          />
          <TextField
            variant="outlined"
            margin="normal"
            required
            fullWidth
            name="password"
            label="Password"
            type="password"
            id="password"
            autoComplete="current-password"
            onChange={e => { setPassword(e.target.value); setCorrect() }}
          />
          {(!status) && <Alert severity="error">Incorrect credentials. Please try again</Alert>}

          <FormButton
            type="submit"
            className={classes.button}
            disabled={!validateForm()}
            size="large"
            color="secondary"
            fullWidth
          >
            Sign In
              </FormButton>
        </form>
        


        <Typography align="center">
          <Link underline="always" href="/premium-themes/onepirate/forgot-password/">
            Forgot password?
          </Link>
        </Typography>
      </AppForm>
      

    </React.Fragment>


  );
}

I personally recommend using [react-hook-form](https://react-hook-form.com/) — Eran Amarante, Sep 25 '20 at 05:42
You can :), but I recommended the 3rd party cause I think you want many validation in your form. I'll create a sample for you. — Eran Amarante, Sep 25 '20 at 06:09
Here's a [codesandbox](https://codesandbox.io/s/gallant-sunset-es5rj?file=/src/App.js). — Eran Amarante, Sep 25 '20 at 06:19

score 1 · Answer 1 · answered Sep 25 '20 at 06:19

Create two new states: usernameIsValid & passwordIsValid with initial state set to 'true'
On calling handleSubmit(), before calling the api create a condition as follows:

if (username.length !== 3) setUsernameIsValid(false)

if (password.length !== 3) setPasswordIsValid(false)
If the condition fails, do not make the api call.
Under the TextFields create a div to contain the error like so:

{!userNameIsValid && <div>Please enter a valid username</div>}

How to validate username and password for my form?

1 Answers1