使用 JQuery 验证器验证 3 个输入

如何解决使用 JQuery 验证器验证 3 个输入

我正在使用 JQuery Validator，但我有一个包含 3 个 input 的页面作为排序代码。

这些 input 不是 required，除非填充了 input 之一，然后所有这些都需要 required

下面是我的 HTML 排序代码 inputs

<div id="sortCodeInputs" class="d-flex inline-flex">
    <input id="ddFirstSortCode" name="firstSortCode" class="form-control col-4 col-md-3 mand auto" type="text" minlength="2" maxlength="2"
            placeholder="00" oninput="this.value = this.value.replace(/[^0-9]/g,'')" />
    <span class="d-flex align-items-center px-3">-</span>
    <input id="ddSecSortCode" name="secondSortCode" class="form-control col-4 col-md-3 mand auto" type="text" minlength="2" maxlength="2"
            placeholder="00" oninput="this.value = this.value.replace(/[^0-9]/g,'')" />
    <span class="d-flex align-items-center px-3">-</span>
    <input id="ddLastSortCode" name="lastSortCode" class="form-control col-4 col-md-3 mand auto" type="text" minlength="2" maxlength="2"
            placeholder="00" oninput="this.value = this.value.replace(/[^0-9]/g,'')" />
</div>

这是我当前的 validator，我的各种 form 正在使用它

function validateForm() {
    var form = $('#' + formId);
    var errorMsg = 'Please enter a valid ';
    
    validator = form.validate({
        onfocusin: function (element) {
            this.element(element);
        },onkeyup: function (element) {
            this.element(element);
        },rules: {
            'addPc': {
                postcode: true
            },'emailAddress': {
                email: true
            },'vatNo': {
                vat: true
            },'compRegNo': {
                minlength: 8,maxlength: 8
            },'amount': {
                currency: true
            },// 'firstSortCode': {
            //     required:
            //         function () {
            //             return $('input[name="secondSortCode"]').val() != '' || $('input[name="lastSortCode"]').val() != '';
            //         }
            // },// 'secondSortCode': {
            //     required:
            //         function () {
            //             return $('input[name="firstSortCode"]').val() != '' || $('input[name="lastSortCode"]').val() != '';
            //         }
            // },// 'lastSortCode': {
            //     required:
            //         function () {
            //             return $('input[name="firstSortCode"]').val() != '' || $('input[name="secondSortCode"]').val() != '';
            //         }
            // }
        },errorPlacement: function (error,element) {
            if (element.attr("name") == "firstSortCode" || element.attr("name") == "secondSortCode" || element.attr("name") == "lastSortCode") {
                error.insertAfter($('div[name="sortCodeRow"]'));
            } else if (element.attr("id") == "limitsCallAmt") {
                error.insertBefore($("#remainingLimit"));
            } else {
                error.insertAfter(element);
            }
        }
    });

    $.validator.addMethod("postcode",() => {
        return /^([A-Za-z]{1,2}[\s]{0,3}\d{1,2}[A-Za-z]{0,1}[\s]{0,3}\d{1}[\s]{0,3}[A-Za-z]{2})?$/.test(inputVal);

    },errorMsg + 'postcode.');

    $.validator.addMethod("email",() => {
        return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/.test(inputVal);

    },errorMsg + 'email address.');

    $.validator.addMethod("vat",() => {
        return /([GB])*(([1-9]\d{8})|([1-9]\d{11}))$/gm.test(inputVal);

    },errorMsg + 'VAT number.');

    $.validator.addMethod("currency",function (value,element) {
        return this.optional(element) || /^\$?(\d{1,3}(\,\d{3})*|(\d+))(\.\d{2})?$/.test(value);
    },errorMsg + 'valid amount.');
}

我开始添加一些 rules 使它们成为 required，但这是我得到的。

目前，这是它的样子 当没有填充时，没有错误 >>> 这是正确的

然后当我开始输入时会发生这种情况，2 个字符的错误是正确的，因为输入时输入的“最小长度”为 2，但是每当我点击任何地方时，我都会收到重复的错误消息

我要显示的只有 1 个“此字段是 required”和只有 1 个“请输入至少 2 个字符”消息（以下是示例）

我已阅读有关 groups 的内容，但不确定如何使其工作。以下是我试图达到的要求

• 一起验证所有 3 个输入
• 根据场景仅显示一条错误消息。任何一个：
  • 此字段是必填字段。
  • 请至少输入 2 个字符。
• 如果填充了一个输入，则应验证其余两个输入