react-form-with-constraints icon indicating copy to clipboard operation
react-form-with-constraints copied to clipboard

Validation errors not disappearing

Open Thorarin opened this issue 3 years ago • 1 comments

I'm seeing some unexpected behavior when I trigger validation on a button press:

onSave = async (event: React.MouseEvent<HTMLButtonElement>) => {
        event.preventDefault();

        // I need to add this call, otherwise all the validation messages from
        // the previous submission attempt stay, even though the offending
        // input fields are fixed.
        this.form.current.reset();

        await this.form.current.validateForm();
        if (!this.form.current.isValid()) {
            console.log('Form invalid');
            return;
        }

        // Continue processing...
}

The examples don't have this reset() call, so I'm wondering what could cause this type of behavior? I can't think of anything "special" I did in my form that would cause this.

I'm using version 0.15.0.

Thorarin avatar Sep 03 '20 15:09 Thorarin

Difficult to help without a demo.

If you want to re-validate all fields, use validateFields().

validateForm() "validates only all non-dirty fields"

I guess you are using React classes. Follow this example: https://codepen.io/tkrotoff/pen/BRGdqL You should have:

  • <input onChange={handleChange} /> with handleChange calling validateFields(target)
  • onSubmit={this.handleSubmit} with handleSubmit calling validateForm()

tkrotoff avatar Sep 16 '20 15:09 tkrotoff