How to keep sync validation with Redux-form v6 while implementing custom onBlur? -


i have field needs custom onblur functionality, when implement functionality, normal sync validation stops working. can still see error getting updated within props.meta.error when console log componentdidupdate, doesn't show error.

i've tried tinkering manually dispatching 'touch' action, , trying asyncvalidation too, error field doesn't show unless leave onblur prop alone.

is there way can implement own onblur function, while still retaining original error validation stuff?

this component i'm making:

class postalcodetextinput extends react.component { // eslint-disable-line   fetchaddressesvalid = () => {     // this.props.async();     if (this.props.input.value.length > 5) {       if (!this.props.meta.error) {         this.props.fetchaddresses(this.props.input.value);       }     }   }    render() {     const { helptext, input, label, type, meta: { touched, error } } = this.props;     const classnames = classnames({       'text-input': 'text-input',       'form-group': 'form-group',       invalid: touched && error,     });     return (       <div classname={classnames}>         <label htmlfor={label}>{label}</label>         <div>           <input             {...input}             type={type}             placeholder={label}             onblur={this.fetchaddressesvalid} // *           />           {touched && error && <p classname="warning">{error}</p>}         </div>         <small><em>{helptext}</em></small>       </div>     );   } } 

and validation that's supposed apply:

const validate = (values) => { // eslint-disable-line   const errors = {};    // newaddressfields   if (!values.get('postal_code')) {     errors.postal_code = 'required';   } ... 

this looks when comment out line:

// onblur={this.fetchaddressesvalid} 

enter image description here

and looks when leave line in:

onblur={this.fetchaddressesvalid} 

enter image description here

how error message pop in first picture, while still using own onblur function?

delegate onblur when you're done.


change

onblur={this.fetchaddressesvalid} 

to

onblur={(e) => {  this.fetchaddressesvalid  input.onblur(e); }} 

Comments

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -