CoreUI React模态框表单自定义验证失效及类型错误问题

错误原因分析 #

1. noValidate类型错误：CoreUI的CForm组件不支持驼峰式的noValidate属性，原生HTML表单禁用默认验证的属性是小写连字符格式的novalidate。
2. feedbackInvalid类型错误：CFormInput没有feedbackInvalid这个属性，CoreUI的表单反馈需要通过独立的CFormFeedback组件实现。
3. 验证失效：缺少正确的表单状态控制和提交时的验证触发逻辑。

修正后的代码示例 #

import { useState } from 'react';
import { CModal, CModalBody, CForm, CFormInput, CFormFeedback, CButton } from '@coreui/react';

const YourModalComponent = () => {
  const [visible, setVisible] = useState(false);
  const [validated, setValidated] = useState(false);
  const [formData, setFormData] = useState({ UserName: '' });

  const handleAddFormChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };

  const handleAddFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    // 检查表单有效性
    if (form.checkValidity() === false) {
      e.stopPropagation();
    }
    // 更新验证状态，触发CoreUI的表单样式反馈
    setValidated(true);

    // 如果表单验证通过，执行后续逻辑
    if (form.checkValidity()) {
      console.log('表单提交:', formData);
      // 这里可以添加提交到后端的逻辑
      setVisible(false);
      setValidated(false);
      setFormData({ UserName: '' });
    }
  };

  return (
    <>
      <CButton onClick={() => setVisible(true)}>打开模态框</CButton>
      <CModal visible={visible} onClose={() => setVisible(false)}>
        <CModalBody>
          {/* 使用novalidate禁用浏览器默认验证，validated控制CoreUI的验证状态 */}
          <CForm 
            novalidate 
            validated={validated} 
            onSubmit={handleAddFormSubmit} 
            className="row"
          >
            <div className="col-12" style={{ paddingLeft: '25px' }}>
              <CFormInput
                className="mb-2"
                type="text"
                name="UserName"
                id="UserNameInput"
                placeholder="Enter UserName..."
                value={formData.UserName}
                onChange={handleAddFormChange}
                maxLength={2}
                required
              />
              {/* 关联input的id，invalid属性指定为无效状态的反馈 */}
              <CFormFeedback invalid>
                Please choose a username.
              </CFormFeedback>
            </div>
            <div className="col-12 mt-3">
              <CButton type="submit" color="primary">提交</CButton>
              <CButton color="secondary" onClick={() => setVisible(false)} className="ms-2">取消</CButton>
            </div>
          </CForm>
        </CModalBody>
      </CModal>
    </>
  );
};

export default YourModalComponent;

关键修正点 #

• 替换noValidate为novalidate：符合原生HTML属性规范，CoreUI的CForm组件支持该属性，直接解决类型错误。
• 使用CFormFeedback组件：移除CFormInput上不存在的feedbackInvalid，改用独立的反馈组件，并通过invalid属性标记为无效状态提示。
• 完善提交验证逻辑：在提交方法中先阻止默认行为，调用原生表单的checkValidity()验证有效性，再更新validated状态触发CoreUI的样式反馈，确保验证逻辑生效。
• 补充完整模态框结构：添加CModalBody包裹表单，补充模态框可见性控制，修复原代码中结构不完整的问题。

内容的提问来源于stack exchange，提问作者veena panakanapalli