CoreUI 表单中的自定义验证不起作用答案

【问题标题】：Custom validation in CoreUI form is not workingCoreUI 表单中的自定义验证不起作用
【发布时间】：2022-11-04 21:04:19
【问题描述】：

我正在尝试使用 coreui react 在模态表单上添加自定义验证，但无法使其正常工作。低于错误

类型“IntrinsicAttributes & CFormProps & RefAttributes”上不存在属性“noValidate”

     <CModal    
    <CForm noValidate validated={validated} onSubmit={handleAddFormSubmit} className="row">
      <div className="row">
        <div className="col-12" style={{ paddingLeft: '25px' }}>
          <CFormInput
            className="mb-2"
            type="text"
            name="Username"
            placeholder="Enter UserName..."
            value={formData.UserName}
            onChange={handleAddFormChange}
            maxLength={2}
            required 
          />
          <CFormFeedback invalid>Please choose a username.</CFormFeedback>              
          <div />
       </div>
       </CForm>
  </CModal>

尝试以下方式 - 低于错误

类型“IntrinsicAttributes & CFormProps & RefAttributes”上不存在属性“noValidate” 类型“IntrinsicAttributes & CFormProps & RefAttributes”上不存在属性“feedbackInvalid”

<CModal    
<CForm noValidate validated={validated} onSubmit={handleAddFormSubmit} className="row">
  <div className="row">
    <div className="col-12" style={{ paddingLeft: '25px' }}>
      <CFormInput
        className="mb-2"
        type="text"
        name="Username"
        placeholder="Enter UserName..."
        value={formData.UserName}
        onChange={handleAddFormChange}
        maxLength={2}
        required 
        feedbackInvalid="Please provide a valid user name."
      />             
      <div />
   </div>
   </CForm>

【问题讨论】：

标签： reactjs forms validation bootstrap-modal core-ui

【解决方案1】：

假设您仍在使用 coreUi V3.**。将 coreUi 的版本更新到 4.1.5 或更高版本。请在此处阅读从 V3 到 V4 的迁移指南https://coreui.io/docs/migration/

它在最新版本中运行良好。

【讨论】：