CODEWITHSUNDEEP
jqueryjquery-validate
eyeonu
eyeonu

Reputation: 211

Jquery validate, multiple field validation and move focus

I have a code form, with a multi-input field for a code. Now I have on every keyup the input field is filled with one letter and the focus is set to the next field (if exists), except its a backspace keypress, than it deletes the current character and the focus is set to the previous input field.

All this works without jquery validate as expected, but as soon as I validate the fields with the jquery validate plugin, the whole process is not working for the last field, if you enter all letters and than delete them all with backspace, when you try to enter them again, it will stop in field before the last field. Am I doing something wrong here: 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.
            }
        }
    });
});

Upvotes: 0

Views: 1523

Answers (1)

Sparky
Sparky

Reputation: 98728

The problem is your usage of the jQuery .prev() method. 

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

Once the validation plugin inserts the error message after the first text input element, it breaks because this message element becomes the new previous element. Since .prev() gets "the immediately preceding sibling" of $(this), it's trying to get the message element instead of the text input.

I use the errorPlacement option to place the dynamic message completely outside of your input elements.

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

If you have other form input elements, you can refactor this function into a conditional so that it only applies to this grouping.

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

DEMO: jsfiddle.net/xtd0o38d/4/

Upvotes: 1

Related Questions