需要在 MDB 输入中进行验证答案

【问题标题】：Need validation in MDB inputs需要在 MDB 输入中进行验证
【发布时间】：2023-01-29 16:06:25
【问题描述】：

我使用 MDB 包。我有登录页面。我需要验证页面

 <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>
 </MDBValidation>

我写了代码。但并不像我预期的那样正常工作。即使我不输入密码，我也可以在提交按钮点击时获得成功警报。我想以 antd 形式正常工作。谁能帮忙。

【问题讨论】：

您可以在codesandbox 中分享您代码的示例可执行文件吗？
@Majid 我曾经关注过这个，mdbootstrap.com/docs/standard/forms/validation

标签： reactjs bootstrap-5 mdbootstrap

【解决方案1】：

你所做的是对的。但是在 onsubmit 函数中你必须添加下面的代码来验证

if (!event.target.checkValidity()) {
        event.target.reportValidity();
        event.target.className += " was-validated";
        event.preventDefault();
        return;
    }

如果您的必填字段为空，它将限制代码执行。

对于自定义错误，您可以使用MDB 验证项成分。它具有名为反馈你可以在哪里提到你的错误文本

【讨论】：