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

Posted 2023-05-08

【中文标题】TextValidator 在设置为 required 时显示浏览器验证消息

【英文标题】：TextValidator showing browser validation messages when it is set to required

【发布时间】：2020-08-19 12:19:10

【问题描述】：

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

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

【参考方案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>