How to check validation field required in Form when onClick button

Question

I using EXTReact and have TextField Here is my code.

 <Textfield
      required
      label="Required Field"
      requiredMessage="This field is required."
      errorTarget="under"
      name="field"
      onChange={(e) => handleChaneValue(e)}
      />
  <Button 
      ui="confirm" 
      text="BTN submit" 
      handler={handleClick} 
      style={{border: '1px solid black'}}
      />

When the submit Button is clicked, if the field does not have any value it should show the error message.

Answer 1

You should:

- step 1 : When textfField change, update the state of your component (with the value of textfield) ==> Two ways binding will be necessary (Data binding in React)

- step 2 : Then, you create your error message div/text/paragraph anyway (where you want and with the style you need), and you add style display:none. Here you just set the html and css of the feature.

- step 3 : Then, on click (button), you check the state value of textField (the one you made at step 1). If it's empty, you change style of the error message div ==> display:block