MDB登录表单验证失效求助：无校验直接触发提交成功提示

问题场景：使用MDB开发包开发登录页面，添加表单验证后，即使未输入密码，点击提交按钮仍弹出成功提示，需要实现类似antd的表单校验效果，原代码如下：

<MDBValidation className='row g-3' isValidated>
  <MDBValidationItem >
    <MDBInput
      wrapperClass='mb-4'
      label='Email address'
      id='validationCustom01'
      type='email'
      value={formValue.email}
      name='email'
      required
      onChange={onChange}
      autoComplete='off' />
  </MDBValidationItem>
  <MDBValidationItem >
    <MDBInput
      wrapperClass='mb-4'
      label='Password'
      id='validationCustom02'
      type='password'
      value={formValue.password}
      name='password'
      required
      onChange={onChange}
      autoComplete='off' />
  </MDBValidationItem>

  <div className="text-center pt-1 mb-5 pb-1">
    <MDBBtn className="mb-4 w-100 gradient-custom-2" type='submit' onClick={() => { alert("Successfully Logged in") }}>Sign in</MDBBtn>
  </div>
</MDBValidation>

核心问题 #

直接给按钮绑定onClick会跳过MDB表单的内置校验流程，必须通过MDBValidation的onSubmit事件触发校验逻辑。

修复步骤及完整代码 #

1. 移除按钮的onClick事件，改为给MDBValidation绑定onSubmit事件
2. 给MDBValidationItem添加错误提示文本和校验状态绑定
3. 在提交函数中先判断表单有效性，再执行登录逻辑

import { useState } from 'react';
import { MDBValidation, MDBValidationItem, MDBInput, MDBBtn } from 'mdb-react-ui-kit';

export default function LoginForm() {
  const [formValue, setFormValue] = useState({ email: '', password: '' });
  const [validated, setValidated] = useState(false);

  const onChange = (e) => {
    setFormValue({ ...formValue, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    if (form.checkValidity() === false) {
      e.stopPropagation();
    } else {
      // 校验通过，执行登录逻辑
      alert("Successfully Logged in");
    }
    setValidated(true);
  };

  return (
    <MDBValidation className='row g-3' noValidate validated={validated} onSubmit={handleSubmit}>
      <MDBValidationItem feedback="请输入有效的邮箱地址" invalid>
        <MDBInput
          wrapperClass='mb-4'
          label='Email address'
          id='validationCustom01'
          type='email'
          value={formValue.email}
          name='email'
          required
          onChange={onChange}
          autoComplete='off' />
      </MDBValidationItem>
      <MDBValidationItem feedback="请输入密码" invalid>
        <MDBInput
          wrapperClass='mb-4'
          label='Password'
          id='validationCustom02'
          type='password'
          value={formValue.password}
          name='password'
          required
          onChange={onChange}
          autoComplete='off' />
      </MDBValidationItem>

      <div className="text-center pt-1 mb-5 pb-1">
        <MDBBtn className="mb-4 w-100 gradient-custom-2" type='submit'>Sign in</MDBBtn>
      </div>
    </MDBValidation>
  );
}

关键说明 #

• noValidate属性禁用浏览器默认校验，改用MDB的自定义校验样式
• validated状态控制校验结果的显示时机
• form.checkValidity()用于判断表单是否通过所有预设校验规则
• 只有当校验完全通过时，才会执行登录成功的逻辑

内容的提问来源于stack exchange，提问作者Lex V