单击提交时,如果文本字段错误匹配,则显示错误提示

在react中使用MUI的标准表单上,设置输入类型时 type="email" ,如果地址与一些基本规则不匹配(即“需要@”),则当按下提交按钮时,将显示基本验证器。

我试图达到同样的效果,如果自定义要求不匹配,则会发出警告消息。因此,我使用属性错误将输入值设置为大于至少9个数字,如果不大于9个数字,则应显示自定义警告消息。

然而,如下图所示,如果错误匹配,字段将标记为红色,但我可以以任何方式提交表单,这正是我试图避免的。

 <TextField
     fullWidth
     label={<>Teléfono</>}
     value={inp.tel}
     error={inp.tel.length<9}
     type="number"
     onChange={(e)=>anadirValor(e,index,telFormValues,setTelFormValues, "tel")}
     id="outlined-size-small"
     size="small"
     color="primary"
     autoComplete="new-password"
     required
  />