@diagramers/admin/src/views/interface/forms/validation/ValidationStandard.js

Diagramers Admin Template - React starter for admin dashboards.

import React, { useState } from 'react';
import { Button, Col, Form, Row } from 'react-bootstrap';

const ValidationStandard = () => {
  const [validated, setValidated] = useState(false);

  const handleSubmit = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }
    setValidated(true);
  };

  return (
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Row className="mb-3 g-3">
        <Col md="6">
          <Form.Group className="position-relative tooltip-end-top" controlId="validationStandard01">
            <Form.Label>First name</Form.Label>
            <Form.Control required type="text" defaultValue="Mark" />
            <Form.Control.Feedback type="invalid">Please provide your first name.</Form.Control.Feedback>
            <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
          </Form.Group>
        </Col>
        <Col md="6">
          <Form.Group className="position-relative tooltip-end-top" controlId="validationStandard02">
            <Form.Label>Last name</Form.Label>
            <Form.Control required type="text" defaultValue="Otto" />
            <Form.Control.Feedback type="invalid">Please provide your last name.</Form.Control.Feedback>
            <Form.Control.Feedback>Looks good!</Form.Control.Feedback>
          </Form.Group>
        </Col>
        <Col md="6">
          <Form.Group className="position-relative tooltip-end-top" controlId="validationStandard03">
            <Form.Label>City</Form.Label>
            <Form.Control type="text" required />
            <Form.Control.Feedback type="invalid">Please provide a valid city.</Form.Control.Feedback>
          </Form.Group>
        </Col>
        <Col md="6">
          <Form.Group className="position-relative tooltip-end-top" controlId="validationStandard04">
            <Form.Label>Username</Form.Label>
            <Form.Control type="text" required />
            <Form.Control.Feedback type="invalid">Please choose a username.</Form.Control.Feedback>
          </Form.Group>
        </Col>
        <Col md="6">
          <Form.Group className="position-relative tooltip-end-top" controlId="validationStandard05">
            <Form.Label>State</Form.Label>
            <Form.Control type="text" required />
            <Form.Control.Feedback type="invalid">Please provide a valid state.</Form.Control.Feedback>
          </Form.Group>
        </Col>
        <Col md="6">
          <Form.Group className="position-relative tooltip-end-top" controlId="validationStandard06">
            <Form.Label>Zip</Form.Label>
            <Form.Control type="text" required />
            <Form.Control.Feedback type="invalid">Please provide a valid zip.</Form.Control.Feedback>
          </Form.Group>
        </Col>
        <Col md="12">
          <div className="form-check d-inline-block mb-0 position-relative tooltip-end-top">
            <input type="checkbox" className="form-check-input" required id="nativeTermsCheck" />
            <label className="form-check-label align-middle" htmlFor="nativeTermsCheck">
              I have read and accept the terms and conditions.
            </label>
            <Form.Control.Feedback type="invalid">Please accept terms and conditions.</Form.Control.Feedback>
          </div>
        </Col>
      </Row>
      <Button type="submit">Submit</Button>
    </Form>
  );
};

export default ValidationStandard;