Redux-form: Skip first validation

[wtfil]

Hi!
Is any way to skip initial form validation and validate fields only when they was touched or form submited?

In example bellow I have a simple form and you will see the First name should not be empty error right after render. In real project there are lots of fields, and user will see tone of errors even before any actions. It would be nice to considel all fields are valid before any manipulation with them (or submit)

import React, {Component} from 'react';                                                                                                                                                                            
import {connectReduxForm} from 'redux-form';                                                                                                                                                                       

@connectReduxForm({                                                                                                                                                                                                
    form: 'testForm',                                                                                                                                                                                              
    fields: ['firstName', 'lastName'],                                                                                                                                                                             
    validate: validateForm                                                                                                                                                                                         
})                                                                                                                                                                                                                 
export default class TestFrom extends Component {                                                                                                                                                                  
    render() {                                                                                                                                                                                                     
        const {fields, handleSubmit} = this.props;                                                                                                                                                                 
        return <form onSubmit={handleSubmit}>                                                                                                                                                                      

            {fields.firstName.error && <span>{fields.firstName.error}</span>}                                                                                                                                      
            <input {...fields.firstName} />                                                                                                                                                                        

            {fields.lastName.error && <span>{fields.lastName.error}</span>}                                                                                                                                        
            <input {...fields.lastName}/>                                                                                                                                                                          

        </form>;                                                                                                                                                                                                   
    }                                                                                                                                                                                                              
}                                                                                                                                                                                                                  

function validateForm(data) {                                                                                                                                                                                      
    let errors = {};                                                                                                                                                                                               
    if (!data.firstName) {                                                                                                                                                                                         
        errors.firstName = 'First name should not be empty'                                                                                                                                                        
    }                                                                                                                                                                                                              
    return errors;                                                                                                                                                                                                 
} 

[erikras]

This is the purpose of the touched flags. In most UI cases, you should only show an error if a field has been touched (gone to and then blurred). There is also a visited flag, which is set to true onFocus. There's a working example of how the flags work here.

Does that help?

[wtfil]

@erikras Thank you a lot!
just need to update my example from:

{fields.firstName.error && <span>{fields.firstName.error}</span>}   

to

{fields.firstName.touched && fields.firstName.error && <span>{fields.firstName.error}</span>}   

You can close the issue:)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.