Question

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

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

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

Answer 1

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

<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");
    }
}

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

Answer 2

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

如果是<input>或<texxtarea>元素，您可以使用`.on（“input”，checkMyForm）;

如果是<select>个元素，你可以使用`.on（“change”，checkMyForm）;

例如，

$('#userId').on('input', checkMyForm );
$('#userPassword').on('input', checkMyForm );
$('#userGender').on('change', checkMyForm );

Jquery验证：在表单有效时删除类

2 个答案: