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.
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>