How to check validation field required in Form when onClick button

Question

I using EXTReact and have TextField Here is my code.

 <Textfield
      required
      label="Required Field"
      requiredMessage="This field is required."
      errorTarget="under"
      name="field"
      onChange={(e) => handleChaneValue(e)}
      />
  <Button 
      ui="confirm" 
      text="BTN submit" 
      handler={handleClick} 
      style={{border: '1px solid black'}}
      />

When the submit Button is clicked, if the field does not have any value it should show the error message.

Answer 1

You should:

- step 1 : When textfField change, update the state of your component (with the value of textfield) ==> Two ways binding will be necessary (Data binding in React)

- step 2 : Then, you create your error message div/text/paragraph anyway (where you want and with the style you need), and you add style display:none. Here you just set the html and css of the feature.

- step 3 : Then, on click (button), you check the state value of textField (the one you made at step 1). If it's empty, you change style of the error message div ==> display:block

Answer 2

Please refer to the following code.

Note: The code is only looking for a single TextField. I have used material-ui TextField and Button component(I am not sure which one you're using). However, the logic should remain the same.

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

function App() {
  const [field, setField] = useState('');
  const [error, setError] = useState(false);
  const handleClick = () => {
    if (!field) {
      setError(true);
      return null;
    }
  };
  const handleChangeValue = (e) => {
    setField(e.target.value);
  };
  return (
    <div>
      <TextField
        required
        label="Required Field"
        value={field}
        error={!!error}
        name="field"
        onChange={(e) => handleChangeValue(e)}
        helperText={error ? 'this is required' : ''}
      />
      <Button onClick={handleClick} style={{ border: '1px solid black' }}>
        Submit
      </Button>
    </div>
  );
}
export default App;

Answer 3

You can use Formik Formik-official.

import React from 'react';
import ReactDOM from 'react-dom';
import { useFormik } from 'formik';
import * as yup from 'yup';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

const validationSchema = yup.object({
  email: yup
    .string('Enter your email')
    .email('Enter a valid email')
    .required('Email is required'),
  password: yup
    .string('Enter your password')
    .min(8, 'Password should be of minimum 8 characters length')
    .required('Password is required'),
});

const WithMaterialUI = () => {
  const formik = useFormik({
    initialValues: {
      email: 'foobar@example.com',
      password: 'foobar',
    },
    validationSchema: validationSchema,
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <div>
      <form onSubmit={formik.handleSubmit}>
        <TextField
          fullWidth
          id="email"
          name="email"
          label="Email"
          value={formik.values.email}
          onChange={formik.handleChange}
          error={formik.touched.email && Boolean(formik.errors.email)}
          helperText={formik.touched.email && formik.errors.email}
        />
        <TextField
          fullWidth
          id="password"
          name="password"
          label="Password"
          type="password"
          value={formik.values.password}
          onChange={formik.handleChange}
          error={formik.touched.password && Boolean(formik.errors.password)}
          helperText={formik.touched.password && formik.errors.password}
        />
        <Button color="primary" variant="contained" fullWidth type="submit">
          Submit
        </Button>
      </form>
    </div>
  );
};

ReactDOM.render(<WithMaterialUI />, document.getElementById('root'));