如何在按钮单击时显示不同的错误消息？

Question

Could you please tell me How to show different error message on button click ? Actually when pattern is not matched it should show pattern is not matched .Currently I am only able to show required message .here is my code

 <TextField
          inputRef={register({ required: true, pattern: /^[A-Za-z]+$/i })}
          label="First name"
          variant="outlined"
          name="firstName"
          required
          helperText={errors.firstName && "First name is required"}
          error={errors.firstName ? true : false}
        />

https://codesandbox.io/s/react-hook-form-get-started-j39p0

Answer 1

You could use something like react-validation package. Using it you will be able to reduce the amount of code you will need to write for your own validation, and also consider the corner cases.

You define your validation functions at first:

import validator from 'validator';
const required = (value) => {
  if (!value.toString().trim().length) {
    // We can return string or jsx as the 'error' prop for the validated Component
    return 'require';
  }
};

const email = (value) => {
  if (!validator.isEmail(value)) {
    return `${value} is not a valid email.`
  }
};
...

And after that plug them into your form, wherever required:

export default class Login extends Component {
    render() {
        return <Form>
            <h3>Login</h3>
            <div>
                <label>
                    Email*
                    <Input value='email@email.com' name='email' validations={[required, email]}/>
                </label>
            </div>
...

Check out their documentation. It is pretty widely used package and should be easy to implement.

Answer 2

Hope this will match with your example Run it here
replace the regular expression with yours

 import React from "react"; import ReactDOM from "react-dom"; import { useForm } from "react-hook-form"; import { TextField, Button } from "@material-ui/core"; import Autocomplete from "@material-ui/lab/Autocomplete"; import { object, string } from "yup"; class Usernames extends React.Component { constructor(props) { super(props) this.state = { errorText: '', value: props.value } } onChange(event) { if (event.target.value.match(/[abc]/g)) { this.setState({ errorText: 'errr' }) } else { this.setState({ errorText: 'Invalid format' }) } } render() { return ( <TextField hintText="Firstname" floatingLabelText="Firstname" name="name" helperText={this.state.errorText ? this.state.errorText : ""} errorText= {this.state.errorText} onChange={this.onChange.bind(this)} /> ) } } const rootElement = document.getElementById("root"); ReactDOM.render(<Usernames />, rootElement);