Сообщение проверки не отображается в библиотеке SimpleReactValidator Reactjs

Question

Я хочу добавить подтверждение в форму реагирования. Я использую библиотеку SimpleReactValidator для проверки, но после настройки кода ошибка не отображается. Но когда я добавляю

      {validator.showMessages('fullName', fullName, 'required|alpha')}

перед оператором возврата, он показывает меня без нажатия кнопки «Отправить».

Вот мой код

import React, { useState } from 'react';  
import SimpleReactValidator from 'simple-react-validator';

const UserDetails = ({ setForm, formData, navigation }) => {

const {
    fullName
}= formData;
    const useForceUpdate = () => useState()[1];
    const validator = new SimpleReactValidator();

    const forceUpdate = useForceUpdate();

    const submitForm = (e) =>{  
        e.preventDefault()

        if (validator.allValid()) {
          alert('You submitted the form and stuff!');
        } else {

            validator.showMessages();
           forceUpdate();
        }
      }
    return( 
       <>
         <input
           type="text"
           name="fullName"
           placeholder='Name'
           onChange={setForm}
           defaultValue={fullName}
         />           

        {validator.message('fullName', fullName, 'required|alpha')}
      </>
   );
}
export default UserDetails;

Answer 1

Надеюсь, это поможет вам

import React, { useState } from 'react';
import SimpleReactValidator from 'simple-react-validator';

const UserDetails = () => {

    const validator = new SimpleReactValidator();

    const [state, setState] = useState({
        fullName:""
    })


    const handleChnage = (e) => {
        setState({
            fullName:e.target.value
        })
    }

    const submitForm = () => {
        if (validator.allValid()) {
          alert('You submitted the form and stuff!');
        } else {
          validator.showMessages();
        }
      }

    return (
        <>
            <input
                type="text"
                name="fullName"
                placeholder='Name'
                onChange={(e) => handleChnage(e)}
                defaultValue={state.fullName}
            />

            {validator.message('fullName', state.fullName, 'required|alpha')}
            <button onClick={() => submitForm()}>submit</button>
        </>
    );
}


export default UserDetails;

Answer 2

Этот пример кода решит вашу проблему.

class App extends React.Component {
  constructor(props){
    super(props)
    this.validator = new SimpleReactValidator({autoForceUpdate: this});
    this.state = {
      fullName: ''
    };
  }

  handleFullNameChange(e) {
    this.setState({fullName: e.target.value});
  }

  handleFullNameBlur() {
    if(this.validator.allValid()) {
       this.validator.hideMessages();
    } else {
      this.validator.showMessages();
    }
  }

  render(){
    return (
      <div>
      <input type="text" name="fullName" placeholder='Name' onChange={this.handleFullNameChange.bind(this)} onBlur={this.handleFullNameBlur.bind(this)} value={this.state.fullName} />
        {this.validator.message('fullName', this.state.fullName, 'required|alpha')}
      </div>
    );
  }
}


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

Вы также можете посмотреть Codepen здесь: https://codepen.io/aptarmy/pen/oNXRezg