Validating Form Fields on button click in office fabric Ui control

Question

I have one TextField and PrimaryButton in my form.

On button click i want to validate textfield.If there is no value then fire requiredfield validation on button click and display message same as display on onGetErrorMessage event.

I know validation is fire onBlur event but i want to fire validation on button click.

How can i do it?

Answer 1

First you have to use refs to your TextField

<TextField ref={(input) => { this.textInput = input; }} label='test' />

Now you can set onGetErrorMessage on click using refs

onClick(e){
    if(this.refs.input.value == undefined ||  this.refs.input.value == null || this.refs.input.value == '')
        this.refs.input.onGetErrorMessage = "you error message"
}

Update 1: Check out this code snippet

class FormExample extends React.Component {
  constructor() {
    super();
    this.state={
      inputError:''
    }
    this.ValidateText = this.ValidateText.bind(this)
  }
  ValidateText(e){
    this.setState({
      inputError:this.input.value?'':'testing'
    })
  }
  render() {
    return (
      <div>
        <div>
          <TextField
            ref={(input) => { this.input = input; }}
            label="Name"
            errorMessage={this.state.inputError}
        />
          <input type='button' value='Submit'
          onClick={this.ValidateText} />
        </div>
      </div>
    );
  }
}