Jquery验证:当窗体有效时删除类

Jquery Validation: removing class when form is valid

本文关键字：删除 有效 窗体 验证 Jquery      更新时间：2023-09-26

我使用的是一个多部分注册，它在按下下一个按钮时呈现每个连续的表单，并且不会褪色。按钮开始褪色。对于我的第一种形式（非常简化）：

<script>
if (registrationStage == 0 && $("#form").valid()) {
       nextBtn.removeClass("faded");
};
</script>

我知道表格是有效的，因为("#form").validate{//foo}工作正常，没有出现错误。如果我将类封装在$("#foodiv").click( function() { // above code});函数中，我也可以删除它。有没有办法让它听到这些条件是真的，以便解开下一个按钮？

在每个表单上，您可以在每个必须验证的输入上放置一个类：

<input id="FirstName" type="text" required class="ValidatingInput" />

然后向该类的所有元素添加一个事件侦听器，侦听onchange事件。更改事件适用于文本框、文本区域、选择列表、单选按钮组、复选框等：

$(".ValidatingInput").change(ValidateAll);

并定义ValidateAll功能来检查您的输入并启用/禁用按钮：

function ValidateAll()
{
    var EverythingChecksOut = true;
    if (document.getElementById("FirstName").value.Length = 0) {
        EverythingChecksOut = false;
    }
    ... other validations ...
    if (EverythingChecksOut) {
       nextBtn.removeClass("faded");
    } else {
       nextBtn.addClass("faded");
    }
}

然后，每当用户更改当前注册表中的一个"必需"或关键字段时，您的代码就会进行检查。如果他们满足了所有要求，按钮将不褪色。但是，如果他们的更改使表单处于无效状态，则该按钮将褪色。这意味着，即使他们填写了字段，按钮也不会褪色，但他们会返回并删除其中一个必需的值，然后按钮会再次褪色。

假设您有一个function checkMyForm() { //... }。

对于<input>或<texxtarea>元素，可以使用`.on（"input"，checkMyForm）；

对于<select>元素，可以使用`.on（"change"，checkMyForm）；

例如，

$('#userId').on('input', checkMyForm );
$('#userPassword').on('input', checkMyForm );
$('#userGender').on('change', checkMyForm );
相关文章：