How to set ErrorMessage on TextField dynamically on Button onClick method

Question

I need to bind ErrorMessage to textfield only when user press button. In this there are nice examples how to use errormessage but the problem is that I don't know how to make append errorMeesage after user click

 <TextField id='titleField' value={titleValue} required={true} label={escape(this.props.description)} onGetErrorMessage={this._getErrorMessage} validateOnLoad={false} />

And this is a call of a button:

private _buttonOnClickHandler() {
    let textvalue = document.getElementById('titleField')["value"];

    if(textvalue === "")
    {
        //call onGetErrorMessage or something that will set ErrorMeesage and input will be red
    }

    return false;
}

Thank you

Workaday

Answer 1

The easiest way I can think of to accomplish this is by predicating the onGetErrorMessage on a state check, which tracks whether the button has been clicked.

<TextField
    id='titleField'
    value={titleValue}
    required={true}
    label={escape(this.props.description)}
    // Only allow showing error message, after determining that user has clicked the button
    onGetErrorMessage={this.state.buttonHasBeenClicked ? this._getErrorMessage : undefined}
    validateOnLoad={false}
/>

Then in your button click handler, simply set that state value:

private _buttonOnClickHandler() {
    this.setState({ buttonHasBeenClicked: true });

    return false;
}

As long as you instantiate buttonHasBeenClicked to be false, then this method will meet the requirement that (a) before the user clicks the button, no error messages are shown by the TextField, and (b) after the user clicks the button, error messages start to be shown. You retain the ability to use _getErrorMessage(value) to customize the error message based upon the current value in the TextField.

Heteromorphic

Answer 2

You need to set state for displaying/hiding error messages based on user input, Check below code

import React, { Component } from 'react';

class App extends Component {
  state = {
    isErrorMessageHidden: true
  }
  clickHandler = () => {
    let textValue = document.getElementById('titleField').value;
    if(textValue === '')
      this.setState({isErrorMessageHidden: false});
    else
      this.setState({isErrorMessageHidden: true});    
  }
  render() {
    return (
      <div>
       <button onClick={this.clickHandler}>Check</button>
       <input type='text' id='titleField' />
       <p 
          style={{'color':'red'}}
          hidden={this.state.isErrorMessageHidden}
        >Please fill the form</p>
       </div>
    );
  }
}

export default App;

I hope this helps.

Yingyingkow

Answer 3

Yet another approach would be to handle all the validations via state values.

The control definition goes like this

<TextField placeholder="Enter a venue location" required onChange={this._onVenueChange} {...this.state.errorData.isValidVenue ? null : { errorMessage: strings.RequiredFieldErrorMessage }}></TextField>

On the Onchange event, you validate the control's value and set the error state value as below,

private _onVenueChange = (event: React.FormEvent<HTMLTextAreaElement | HTMLInputElement>, newValue?: string): void => {

this.setState(prevState => ({
  errorData: {
    ...prevState.errorData,
    isValidVenue: newValue && newValue.length > 0,
    isValidForm: this.state.errorData.isValidForm && newValue && newValue.length > 0
  }
}));

this.setState(prevState => ({
  formData: {
    ...prevState.formData,
    venue: newValue
  }
}));
}

In the above example, I am using two objects within states, one for capturing the values and other for capturing whether the field is error-ed or not.

Hope this helps..

Cheers!!!

Freedwoman