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} and looks when leave line in:
onblur={this.fetchaddressesvalid} 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
Post a Comment