next button with enter key in parsley validator

Question

I used parsley validation pack for two step form.

this is 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>

and this is java script for multi step verification:

$(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"
        }
    });
});

In step one I couldn't use "enter" key for going to next step. So I wrote this code to trigger "#nextBtn" on "enter" key:

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

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

But I have a problem now. when I go to next step using "enter" key, it doesn't focus on password input. My question is: How can I focus on password input when going to next step using "enter" key?

Answer 1

You can get password input with:

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

Or with jQuery:

$('#pwd).focus();

So, when your JavaScript code detects on press enter, just get the html element to focus, and use .focus() function.

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