2

I am using formsy-react to handle validation of my input fields. Problem is that I can't update states. I followed example on formsy github page and validation is working but problem is that states are incorrect. They are always one step (or few) behind and I am not sure why...

I used callback on setState function to implement some custom logic on validation and that part doesn't work properly.

I have a situation where user enters email. After user enters email I check if email is already registrated. If user is already in system, I create new input component (password type) and if not I create new "input type email" component.

Since all forms elements are required I added one more validation check that checks if new password or email component is added and if there is any data.

To update states I used Forms form API call onChange() and this part is not working for unknown reason.

Does someone knows where is the problem?

This is code I am using:

Component Input (shorted version)

changeValue(event) {

    this.setValue(event.currentTarget.value);

},
render() {

    // Set a specific className based on the validation
    // state of this component. showRequired() is true
    // when the value is empty and the required prop is
    // passed to the input. showError() is true when the
    // value typed is invalid
    const className = (this.props.className || "col-md-4" );
    const classValidationName =this.isValid() ? 'valid' : this.showError() ? ' invalid' : null;

    // An error message is returned ONLY if the component is invalid
    // or the server has returned an error message
    const errorMessage = this.getErrorMessage();

    return (
        <div className= {className}>
            <div className="md-form">
                <span className="prefix"><i className={this.props.icon}></i></span>
                <input
                    className={classValidationName}
                    name={this.props.name}
                    id={this.props.id}
                    type={this.props.inputType}
                    value={this.getValue() || ""}
                    onChange={this.changeValue}
                    onBlur={this.props.controlFuncOnBlur}
                    placeholder={this.props.placeholder}
                    required={this.props.required}
                    pattern={this.props.pattern}
                />
                <label id={this.props.name + 'Label'} htmlFor={this.props.name} data-error={errorMessage}
                       data-success={this.props.successMessage}>{this.props.title}
                </label>
            </div>
        </div>
    );
}

Container (shorted version)

handleEmailBlur(event) {
    const self = this;

    if (this.refs.email.isValid) {
        axios.get('/api/checkIsUserRegistrated', {
            params: {
                email: this.state.email
            }
        })
            .then(function (response) {
                if (self.state.userExist !== response.data[0].userExist) {
                    self.setState({
                        userExist: response.data[0].userExist,
                        confirmEmail: "",
                        password: ""

                    });
                    self.forceUpdate();
                }

            })
            .catch(function (error) {
                console.log(error);
            });
    }
}

enableButton = () => {

    this.setState({
        formValid: true
    });
}

disableButton = () => {
    this.setState({
        formValid: false
    });
}
saveCurrentValuesToStates = (getCurrentValues, isChanged) => {
    console.log(this);
    this.setState(getCurrentValues, ()=> {
        if (this.state.formValid && (this.state.password || this.state.confirmEmail)){
            this.setState({
                canSubmitForm: true
            });
        }
        else{
            this.setState({
                canSubmitForm: false
            });
        }
    });
}

 <Formsy.Form className="booker-form" ref="form"
   onChange={this.saveCurrentValuesToStates} onValid={this.enableButton} onInvalid={this.disableButton}>

                            <SingleInput
                            inputType={'email'}
                            icon={'icon-Email'}
                            id={'email'}
                            name={'email'}
                            title={'E-mail'}
                            ref="email"
                            controlFuncOnBlur={this.handleEmailBlur}
                            content={this.state.email}
                            errorMessage={'Incorect E-Mail address'}
                            required
                            validations="isEmail"
                            validationError="This is not a valid email"
                        />
                        {(this.state.userExist === '0') ?
                            <SingleInput
                                inputType={'email'}
                                icon={'icon-Email'}
                                id={'confirmEmail'}
                                name={'confirmEmail'}
                                title={'Confirm your E-mail'}
                                content={this.state.confirmEmail}
                                required
                                validations="equalsField:email"
                                validationError="Emails don't match"

                            />
                            : null}
                        {(this.state.userExist === '1') ?
                            <SingleInput
                                inputType={'password'}
                                icon={'icon-Padlock'}
                                id={'password'}
                                name={'password'}
                                title={'Enter your password'}
                                content={this.state.password}
                                required

                            />
                            : null}
jureispro
  • 1,342
  • 5
  • 22
  • 43

0 Answers0