Следующая кнопка с ключом ввода в валидаторе петрушки

Question

Я использовал пакет проверки петрушки для двухэтапной формы.

это HTML:

<form action="#" method="POST"  autocomplete="off" class="enter-form" data-parsley-validate="" data-parsley-focus="first">
    <div class="form-group form-section">
        <label for="email"><b>email or phone number:</b></label>
        <input type="text" title="enter email or phone number" autofocus="autofocus" tabindex="1" class="form-control" id="email" required="" data-parsley-emailorid="" />
    </div>
    <div class="form-group form-section">
        <label for="pwd"><b>password:</b></label>
        <input type="password" title="enter password" tabindex="2" class="form-control" id="pwd" required="" />
    </div>

    <div class="form-navigation">
        <button type="button" class="previous btn btn-primary pull-left">
            previous &gt;
        </button>
        <button type="button" class="next btn btn-primary pull-right" id="nextBtn">
            &lt; next
        </button>
        <button type="submit" class="btn btn-rang pull-right">
            enter
        </button>
        <span class="clearfix"></span>
    </div>

</form>

и это Java-скрипт для многоэтапной проверки:

$(document).ready(function () {
    var $sections = $('.form-section');

    function navigateTo(index) {
        $sections
        .removeClass('current')
        .eq(index)
        .addClass('current');
        $('.form-navigation .previous').toggle(index > 0);
        var atTheEnd = index >= $sections.length - 1;
        $('.form-navigation .next').toggle(!atTheEnd);
        $('.form-navigation [type=submit]').toggle(atTheEnd);
    }

    function curIndex() {
        return $sections.index($sections.filter('.current'));
    }

    $('.form-navigation .previous').click(function() {
        navigateTo(curIndex() - 1);
    });

    $('.form-navigation .next').click(function() {
        $('.enter-form').parsley().whenValidate({
            group: 'block-' + curIndex()
        }).done(function() {
            navigateTo(curIndex() + 1);
        });
    });

    $sections.each(function(index, section) {
        $(section).find(':input').attr('data-parsley-group', 'block-' + index);
    });
    navigateTo(0);
});

$(document).ready(function () {
    var dummyEmail = $('<input data-parsley-type="email">').parsley();
    var dummyDigits = $('<input data-parsley-pattern="\[0-9]{11}">').parsley();

    window.Parsley.addValidator('emailorid', {
        validateString: function(data) {
            return dummyDigits.isValid(true, data) || dummyEmail.isValid(true, data);
        },
        messages: {
            en: "Is neither a nine digit long number nor a valid email address"
        }
    });
});

На первом этапе я не мог использовать клавишу "ввод" для перехода к следующему шагу. Поэтому я написал этот код для запуска "#nextBtn" на клавишу "enter":

$(document).ready(function () {
    var input = document.getElementById("email");

    input.addEventListener("keyup", function(event) {
        event.preventDefault();
        if (event.keyCode === 13) {
            document.getElementById("nextBtn").click();
        }
    });
});

Но у меня сейчас проблема. когда я перехожу к следующему шагу с помощью клавиши "ввод", он не фокусируется на вводе пароля. Мой вопрос: как я могу сосредоточиться на вводе пароля при переходе к следующему шагу с помощью клавиши "ввод"?

Answer 1

Вы можете получить пароль с помощью:

document.getElementById("pwd").focus();

Или с помощью jQuery:

$('#pwd).focus();

Поэтому, когда ваш код JavaScript обнаруживается при нажатии клавиши ввода, просто сфокусируйте элемент html и используйте .focus() функция.

JQuery DOCS: https://api.jquery.com/focus/
JS Doc: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus