jQuery Validate - 检查是否需要控件而不触发验证

我正在尝试为所需的控件显示星号。该代码在所需的类中运行良好，但现在我有两个字段，公司和名称。根据其他元素值，只需要其中之一。是否可以在不验证控件或表单的情况下检查是否需要输入？

示例 html 结构:

<div class="form-group">
    <label class="control-label" for="CompanyName">Company Name</label>
    <div>
        <input type="text" id="CompanyName" name="CompanyName" class="form-control required">
    </div>
</div>

JS:

validationOptions: {
    ignore: ":disabled,:hidden",

    rules: {
        CompanyName: {
            required: function () {
                return ($("#ContactName").val().length === 0);
            }
        },
        ContactName: {
            required: function () {
                return ($("#CompanyName").val().length === 0);
            }
        }
    },

    onkeyup: function (element) {
        const $parent = $(element).parents(".form-group");

        if ($(element).valid()) {
            $parent.removeClass("invalid");
        } else {
            $parent.addClass("invalid");
        }
    },

    onfocusout: function () {
        if ($("form").valid()) {
            $("form.error").removeClass("error");
            $("form .invalid").removeClass("invalid");
        }
    },

    errorPlacement: function (error, element) {
        const $parent = $(element).parents(".form-group");

        if ($(element).hasClass("error")) {
            $parent.addClass("invalid");
        } else {
            $parent.removeClass("invalid");
        }
    },

    invalidHandler: function (event, validator) {
        $.each(validator.successList, function (index, item) {
            $(item).parents(".form-group").removeClass("invalid");
        });
        const errors = validator.numberOfInvalids();
        if (errors) {
            $.each(validator.errorList, function (index, item) {
                $(item.element).parents(".form-group").addClass("invalid");
            });
        }
    }
}

当然，我可以将我的代码放在上面所需的回调中，但这不是通用的解决方案。

我希望能够多次调用以下函数以根据字段的必需状态更新(引导)表单上的星号。

appendFormControlAsterisk: function ($panel) {
    //removeFormControlAsterisk($panel);

    let $controls = $(".form-control.required");

    $controls.each(function () {
        const $label = $(this).parents(".form-group").find(">.control-label");

        $label.html($label.html() + " <span class='text-danger'>*</span>");
    });
},

试图完成类似的事情:

appendFormControlAsterisk: function ($panel) {
    //removeFormControlAsterisk($panel);

    let $controls = $(".form-control");

    $controls.each(function () {
        if ($(this).isRequired()) {
            const $label = $(this).parents(".form-group").find(">.control-label");

            $label.html($label.html() + " <span class='text-danger'>*</span>");
        }
    });
},

最佳答案

作为jQuery Validate插件的一部分，没有方法将返回已声明，已定义或已分配规则的列表。 (您可以查看 settings.rules 对象内部的值，但这不是动态的或全面的)

但是，插件中内置了一个名为 .check() 的未公开方法，该方法将检查有效性而不触发任何错误消息。它不限于 required 规则，只是有效性。它实际上只会在字段为空期间查找 required 规则。

换句话说，在空白表单上，此方法将 始终 告诉字段是否为 required 而不触发消息。

您必须将它附加到验证器对象，并且参数必须是一个 DOM 元素。

$('#myform').validate().check($('[name="test3"]')[0]) // <-- returns a boolean if defined

或者

var validator = $('#myform').validate({...}); // initialize plugin with options

validator.check($('[name="test3"]')[0]) // <-- returns a boolean if defined

演示:jsfiddle.net/we2johru/2/

请注意，此方法仅在定义规则时返回 bool 值。如果没有定义规则，此方法将返回 undefined 。

关于jQuery Validate - 检查是否需要控件而不触发验证，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47139597/