如何使用可用性Reactstrap验证禁用表单提交按钮

Question

I'm using reactjs with availity reactstrap validation. I want to disable form submit button when form have validation errors. Only enable submit button when there is no validation errors all email address is valid all validation passes. How can i achieve this?

This is my code.

import React, { Component } from "react";
import { Row, Card, CardTitle, Form, Label, Input, Button } from "reactstrap";
import { AvForm, AvField, AvGroup } from "availity-reactstrap-validation";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import { Colxx, Separator } from "../../components/common/CustomBootstrap";
import IntlMessages from "../../helpers/IntlMessages";
import { loginUserAsync } from "./../../redux/auth/actions";
class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event, errors, values) {
    debugger;
    console.log(errors);
    console.log(values);
    if (errors.length === 0) {
      try {
        this.props.loginUserAsync(values, this.props.history);
      } catch (e) {
        alert(e.message);
      }
      //submit
    }
  }

  handleInputChange = ({ target: { name, value } }) => {
    this.setState({
      [name]: value
    });
  };

  render() {
    const { username, password } = this.state;
    return (
      <Row className="h-100">
        <Colxx xxs="12" md="10" className="mx-auto my-auto">
          <Card className="auth-card">
            <div className="position-relative image-side ">
              <p className="text-white h2">MAGIC IS IN THE DETAILS</p>
              <p className="white mb-0">
                Please use your credentials to login.
                <br />
                If you are not a member, please{" "}
                <NavLink to={`/register`} className="white">
                  register
                </NavLink>
                .
              </p>
            </div>
            <div className="form-side">
              <NavLink to={`/`} className="white">
                <span className="logo-single" />
              </NavLink>
              {/* <CardTitle className="mb-4">
                <IntlMessages id="user.login-title" />
              </CardTitle> */}
              <AvForm
                className="av-tooltip tooltip-label-right"
                onSubmit={this.handleSubmit}
              >
                <AvGroup className="error-t-negative">
                  <Label className="has-float-label">Email</Label>
                  <AvField
                    name="username"
                    type="email"
                    value={username}
                    defaultValue={username}
                    onChange={this.handleInputChange}
                    validate={{
                      required: {
                        value: true,
                        errorMessage: "This is a required field."
                      },
                      email: {
                        value: true,
                        errorMessage: "Please enter a valid email address"
                      }
                    }}
                  />
                </AvGroup>
                <AvGroup className="error-l-75 error-t-negative">
                  <Label className="has-float-label">Password</Label>
                  <AvField
                    name="Password"
                    type="password"
                    value={password}
                    defaultValue={password}
                    onChange={this.handleInputChange}
                    validate={{
                      required: {
                        value: true,
                        errorMessage: "This is a required field."
                      }
                    }}
                  />
                </AvGroup>
                <div className="d-flex justify-content-between align-items-center">
                  <NavLink to={`/forgot-password`}>
                    <IntlMessages id="user.forgot-password-question" />
                  </NavLink>
                  <Button color="primary" className="btn-shadow" size="lg">
                    Login
                  </Button>
                </div>
              </AvForm>
            </div>
          </Card>
        </Colxx>
      </Row>
    );
  }
}

How can i make login button disable? Please help.

Answer 1

AVForm has onInvalidSubmit props, maybe you can do it like this

// Updated Answer
const Component = props => {
  const [hasError, setHasError] = useState(false)
  const formEl = useRef(null)

  const handleChange = a => {
    setHasError(formEl.current._inputs.email.context.FormCtrl.hasError())
  }

  return (
    <AvForm ref={formEl}>
      <AvField name="email" onFocus={handleChange} onChange={handleChange} label="Email Address" type="email" required />
      <button color="primary">Submit</button>
      <div>{hasError ? "YES": "NO"}</div>
    </AvForm>
  )

}

Class Based

class AnotherApp extends React.Component {
  constructor(props) {
    super(props)
    this.formEl = React.createRef()
    this.state = {
      hasError: false,
    }
  }

  handleChange = a => {
    this.setState({
      hasError: this.formEl.current._inputs.email.context.FormCtrl.hasError()
    })
  }

  render() {
    return (
      <AvForm ref={this.formEl}>
        <AvField name="email" onFocus={this.handleChange} onChange={this.handleChange} label="Email Address" type="email" required />
        <button color="primary">Submit</button>
        <div>{this.state.hasError ? "YES": "NO"}</div>
      </AvForm>
    )
  }
}