如何检查所有字段是否有效？

Question

此代码检查每个元素是否有效，并根据其情况追加css类。 如果元素有效，则从提交按钮（blocksender）中删除禁用的标记。

但是， 当某个元素有效且某个元素无效时 如果您从有效元素聚焦，则启用提交按钮。这是一个问题。

如何检查所有元素？如果它们都有效，我可以启用提交按钮。

$(document).on('focusout', 'input.validate, textarea.validate', function() {

    if ($(this).hasClass('is_required') || $(this).val().length)
    {

        var result = window['validate_'+$(this).attr('data-validate')]($(this).val())

        if (result)
        {
            $(this).parent().removeClass('form-error').addClass('form-ok');
            $(".blocksender").removeAttr("disabled", "disabled");

        }
        else
        {
            $(this).parent().addClass('form-error').removeClass('form-ok');
            $(".blocksender").attr("disabled", "disabled");
        }
    }
});

这是来自Prestashop 1.6中的validate.js，我在contact_form.tpl中使用它：

<input class="validate is_required" type="text" id="email" name="from" data-validate="isEmail"/>

Answer 1

我会计算错误类的元素数量：如果它是0，启用按钮，如果不是，则禁用它

$(document).on('focusout', 'input.validate, textarea.validate', function() {

    if ($(this).hasClass('is_required') || $(this).val().length)
    {

        var result = window['validate_'+$(this).attr('data-validate')]($(this).val())

        if (result)
        {
            $(this).parent().removeClass('form-error').addClass('form-ok');

            // There's the chance of no errors, check it.
            var numItems = $('.form-error').length;// Check number of elements with class error.

            if(numItems === 0) {// If all items are ok, remove disable.
               $(".blocksender").removeAttr("disabled", "disabled");
            }
        }
        else// There's at least one error, no need to check, disable it.
        {
            $(this).parent().addClass('form-error').removeClass('form-ok');
            $(".blocksender").attr("disabled", "disabled");
        }
    }
});