TextValidator 在设置为 required 时显示浏览器验证消息

【问题标题】：TextValidator showing browser validation messages when it is set to requiredTextValidator 在设置为 required 时显示浏览器验证消息
【发布时间】：2020-08-19 12:19:10
【问题描述】：

我正在使用 react-material-ui-form-validator 中的 TextValidator，我想要显示 '*'当输入在其输入标签中必需时。但是，将 required 传递为“true”是在进行浏览器验证，而不是通过验证器。因此，一种方法是通过将“*”附加为“标签名称 *”来更新标签。这意味着对于每个元素，我都会更改标签文本。但是，我想知道我可以通过 required 但使用验证器而不是浏览器验证的任何选项？

可编辑CodeSandbox，如果您有解决方案，请在此处更新。

【问题讨论】：

标签： validation material-ui required-field

【解决方案1】：

看源码，react-material-ui-form-validator使用react-form-validator-core来生成它的表单。

检查这个line 表明你传递给ValidatorForm 的任何道具（onSubmit、instantValidate、onError、debounceTime 和children 除外）都传递给form 元素。

这意味着您可以使用novalidate 属性来禁用浏览器的验证。

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

【讨论】：