0

我正在尝试弄清楚如何将自定义验证消息添加到我的表单

我的代码看起来像这样

 <Form noValidate validated={ validated } onSubmit={ onSubmit } style={ { 'width': '90%' } }>
    <Form.Group className="mb-3" controlId="company">                
       <Form.Label>Company</Form.Label>                             
       <Form.Control type="company"                                 
                  name="company"                                 
                  placeholder="Enter company name"               
                  // required                                    
                  minLength={5}                                  
                  value={ fields.company }                       
                  onChange={ onFieldChange }                     
    />                                                           
    <Form.Control.Feedback type="invalid">                        
        Please enter the company name.                           
    </Form.Control.Feedback>                                     
  </Form.Group>                                                    
</Form>

请注意Please enter the company name，如果有任何验证错误，我会发出一条通用消息。但是，如果该字段为空白而不是用户输入内容但不够长，因为最小长度为 5，我希望得到不同的消息。

我还有另一种情况，用户输入他的电子邮件两次，我比较以确保它们是相同的。

我已经阅读过，setCustomValidity但我不知道如何获取它存储的消息。我尝试了一些我在网上找到的东西。理想情况下，我希望能够有这样的逻辑：

<Form.Control.Feedback type="invalid">                        
        if (missing) Please enter the company name. 
        if (tooshort) Name must be at least 5 characters                          
</Form.Control.Feedback>

或者像这样

<Form.Control.Feedback type="missing">                        
    Please enter the company name.                         
</Form.Control.Feedback>  
<Form.Control.Feedback type="tooshort">                        
    Name must be at least 5 characters                          
</Form.Control.Feedback>

如何使错误消息更加动态？

4

0 回答 0