Validating Office fabric react textfield

user_8628541 0
Viewed 1049

I have a page with bunch of office fabric textField controls. They have their own onGetErrorMessage method to validate and show the error message. But I don't want to fire validation onBlur or onFocusIn. I want to validate all on some 'Save' button click. How can I access the controls and walk through those and fire validation on it at once? The controls are not in tag.

e.g. 

<div>
    <div>
        <TextField label="First Name:" onGetErrorMessage={this._onError} />
    </div>
    <div>
        <TextField label="Last Name:" onGetErrorMessage={this._onError} />
    </div>
    <div>
        <TextField label="Email:" onGetErrorMessage={this._onError} />
    </div>
    <div>
        <TextField label="Username:" onGetErrorMessage={this._onError} />
    </div>
    <div>
        <input type="button" onClick={this.validate()} value="Save" />
    </div>
</div>

I tried initializing TextField first and then using it in render() and accessing it in validate() but didn't work. Any ideas how this can be achieved?

office-js reactjs
1 Answers

Just came across this, but looks like no one answered. Can be done via a simple event capturing:

validate = () =>{
  this.go = true;
}

_onError = () => {
  if (!this.go){
    return "";
  }
}
user_44982930
Related