How not to validate on first render?

[vijayrawatsan]

How not to validate on first render?
So that all the valid fields are not in red just after render?

[twisty]

In twisty/formsy-react-components we set a validatePristine property, and then test for it before rendering error messages etc.:

    renderErrorMessage: function() {
        if (!this.showErrors()) {
            return '';
        }
        var errorMessages = this.getErrorMessages() || [];
        return errorMessages.map((message, key) => {
            return (
                <span key={key} className="help-block validation-message">{message}</span>
            );
        });
    },

    showErrors: function() {
        if (this.isPristine() === true) {
            if (this.props.validatePristine === false) {
                return false;
            }
        }
        return (this.isValid() === false);
    }

See: https://github.com/twisty/formsy-react-components/blob/68d5fb86bdaf9fb2cd8000c51b4269bd8049d3ab/src/mixins/component.js#L51-L70

[ciaoben]

@vijayrawatsan Have you came up with the solution? I am stuck with 0.14.1 and using the @twisty solution it only 'hide' the errors, but If I have a button controlled by the validity of the form, my input is anyway validated on the first render and so not valid.

In my specific case:

I have a input that has a isUrl validation, and as soon as I visualize it, it shows me the red alert because obviously has no value in it, and no value is not a valid url. Using the @twisty method I have hided the error, but the component run anyway the validation so the component is invalid, and block all the form.

[vijayrawatsan]

I used https://github.com/mbrookes/formsy-material-ui
We have solved most of the issues there.

[ciaoben]

@vijayrawatsan it does not seems a optimal solution for my case, since I don't want to use material design. I guess I will need to do somework for myself.

[vijayrawatsan]

@ciaoben
This might help.
https://github.com/christianalfoni/formsy-react/wiki/validate-on-blur
Most of my issues were resolved using the solution in this link.

[ciaoben]

@vijayrawatsan
Thanks, but I had already implemented that solution but it does not solve directly the problem.

I managed to solved now, here how I did this, for future reference:
I debugged a little the library code, and find out that the problem is that when the field is empty, withou the required prop, the validation trigger anyway, and this is a mistake, because if a have a not required field with isUrl validation, if the field is empty, it should be valid.

I noticed that in the last version the problem was not present, so I searched in the commits, and voilà:

0395f61

The validationRules.js file in this commit has the right changes to make it works wonderfully. Just change the first 18 lines of this file, and everything will work as expected.

[duylam]

Currently I'm experiencing this issue. After going through code, I see that the validation is triggered immediately on componentDidMount() of

component (see https://github.com/christianalfoni/formsy-react/blob/master/src%2Fmain.js#L73). So the possible solution is to introduce one more boolean option on to indicate whether the validation is triggered at first render or not

I submitted PR #277 to fix this