CODEWITHSUNDEEP
validationmaterial-uirequired-field
SHAHBAZ
SHAHBAZ

Reputation: 326

TextValidator showing browser validation messages when it is set to required

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.

Upvotes: 0

Views: 1735

Answers (1)

bertdida
bertdida

Reputation: 5288

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>

Edit TextValidator-required (forked)

Upvotes: 1

Related Questions