TextValidator showing browser validation messages when it is set to required

Question

I'm using TextValidator from react-material-ui-form-validator, what I wanted was to display the '*' when an input is required in its input label. However, passing required as "true" was taking browser validation rather than the validators being passed. So, one way was I update the label by appending '*' as "Label Name *". Which means for every element, I change the label text. But, I would like to know about any option with which I can pass required but use the validators instead of browser validation?

Editable CodeSandbox, if you have a solution kindly update here.

score 1 · Accepted Answer · answered Aug 19 '20 at 13:52

Looking at the source code, react-material-ui-form-validator uses react-form-validator-core to generate its form.

And checking this line shows that whatever props you pass to ValidatorForm (except onSubmit, instantValidate, onError, debounceTime and children) are passed down to form element.

This means you can use novalidate attribute to disable browser's validation.

...
<ValidatorForm
  ref="form"
  onSubmit={this.handleSubmit}
  onError={(errors) => console.log(errors)}
  noValidate={true} // notice this
>
  <TextValidator
    label="Email"
    onChange={this.handleChange}
    name="email"
    required // and this
    value={email}
    validators={["required", "isEmail"]}
    errorMessages={["this field is required", "email is not valid"]}
  />
  <DialogActions>
    <Button type="submit">Submit</Button>
  </DialogActions>
</ValidatorForm>

TextValidator showing browser validation messages when it is set to required

1 Answers1