当输入字段显示从无更改为阻止时，jQuery 验证停止

Posted 2023-05-09

【中文标题】当输入字段显示从无更改为阻止时，jQuery 验证停止

【英文标题】：jQuery validation stops when an input field display is changed to block from none

【发布时间】：2021-04-25 11:34:43

【问题描述】：

我有一个包含以下元素的表单

<div class="form-group form-register-group">
    <label for=""></label>
    <div class="right-box w-100">
        <input type="number" class="otp_input form-control d-none" style="width: 130px;" name="email_otp" id="email_otp" placeholder="Email OTP" value="@$email_otp"/>
    </div>
</div>
<div class="form-group form-register-group">
    <label for=""></label>
    <div class="right-box w-100">
        <button id="email_otp_btn" class="get_otp_btn btn btn-primary">Get OTP on Email</button>
    </div>
</div>

下面是当我点击 OTP 按钮时执行的 JS 代码

$('.get_otp_btn').on('click',function(e)
    e.preventDefault();
    $('#email_otp_btn').removeClass('block').addClass('d-none');
    $('#email_otp').removeClass('d-none');
);

当我点击提交按钮时，像 required 这样的基本验证在表单上起作用。 但是只要我点击 OTP 按钮，然后点击表单的提交按钮，表单就会被提交并忽略其他字段的验证。

调试显示$('#email_otp').removeClass('d-none'); 是罪魁祸首，评论这一行使我的验证再次工作。如何隐藏/显示输入字段而不搞砸验证？

【问题讨论】：

你能让你的代码可运行以显示这种行为吗？

【参考方案1】：

e.preventDefault(); 阻止提交表单。删除它。