reactjsoffice-ui-fabricoffice-fabric

Validating Form Fields on button click in office fabric Ui control


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?


Solution

  • 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>
        );
      }
    }