Question

我有一个代码表单，代码的多输入字段。现在我在每个键盘上输入字段用一个字母填充，并且焦点设置为下一个字段（如果存在），除了它的退格键，它删除当前字符并且焦点设置为前一个输入字段

所有这些都可以在没有jquery验证的情况下正常工作，但是只要我使用jquery validate插件验证字段，整个过程就不能用于最后一个字段，如果输入所有字母而不是全部删除它们，当您再次尝试输入时，它将在最后一个字段之前停止。我在这里做错了什么：jsfiddle

<form action="" class="codeform validate-form">
<fieldset>
    <div class="inputbox no-mobile dibl p-relative">
        <input class="singleinput" name="code1" id="code1" maxlength="1" required type="text">
        <input class="singleinput" name="code2" id="code2" maxlength="1" required type="text">
        <input class="singleinput" name="code3" id="code3" maxlength="1" required type="text">
        <input class="singleinput" name="code4" id="code4" maxlength="1" required type="text">
        <input class="singleinput" name="code5" id="code5" maxlength="1" required type="text">
    </div>
    <div class="button-set">
        <button class="button"><span>Code Senden</span></button>
    </div>
</fieldset>

jQuery(document).ready(
function ($) {

    /* -------- Form Validation  ------
     ===================================*/
        $('form.validate-form').validate({       
            lang: 'de',
            groups: {
                codes: "code1 code2 code3 code4 code5"
            },
            messages: {
                code1: "Pls insert complete code",
                code2: "Pls insert complete code",
                code3: "Pls insert complete code",
                code4: "Pls insert complete code",
                code5: "Pls insert complete code"
            }
        });
    /* -------- Form Adresseingabe ajax send  ------
     ===============================================*/
    $("input.singleinput").on('keyup', function(event){
            console.log($(this));
            console.log($(this).prev('[type="text"]').length);
            console.log($(this).next('[type="text"]').length);
        if (event.keyCode==8) {
            if ($(this).prev('[type="text"]').length > 0){
                $(this).trigger('keypress');
                $(this).prev('[type="text"]')[0].focus();
            }
            else {
                // letztes inputfeld erreicht.
            }
        } else {
            if ($(this).next('[type="text"]').length > 0){
                $(this).trigger('keypress');
                $(this).next('[type="text"]')[0].focus();
            }

            else {
                // letztes inputfeld erreicht.
            }
        }
    });
});

Answer 1

问题是您使用jQuery .prev()方法。

$(this).prev('[type="text"]')

一旦验证插件在第一个文本输入元素之后插入错误消息，它就会中断，因为此消息元素成为新的前一个元素。由于.prev()获得$(this) "the immediately preceding sibling"，因此它会尝试获取消息元素而不是文本输入。

我使用errorPlacement选项将动态消息完全置于输入元素之外。

errorPlacement: function(error, element) {
    error.insertBefore(element.parent());
}

如果您有其他表单输入元素，则可以将此函数重构为条件，以便它仅适用于此分组。

errorPlacement: function(error, element) {
    if (element.hasClass('singleinput')) {
        error.insertBefore(element.parent());
    } else {
        error.insertAfter(element);  // default placement
    }
}

DEMO：jsfiddle.net/xtd0o38d/4/

Jquery验证，多场验证和移动焦点

1 个答案: