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

Question

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

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

Answer 1

查看源代码，react-material-ui-form-validator uses 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>

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

TextValidator showing browser validation messages when it is set to required

validation

required-field

material-ui