Как сделать JQuery Форма шагов для использования клавиш клавиатуры для go вперед и назад - PullRequest
Новая
       38

Как сделать JQuery Форма шагов для использования клавиш клавиатуры для go вперед и назад

0 голосов
/ 08 марта 2020

Я создал форму JQuery Steps, но форма переходит к следующей, только когда я нажимаю кнопку. Но я хочу использовать клавишу Enter на клавиатуре для перехода вперед и клавишу возврата назад для функции назад. Не уверен, как этого добиться.

Моя форма HTML равна 

 <div class="container">
            <form method="POST" id="signup-form" class="signup-form" action="#">
                <div>
                    <h3></h3>
                    <fieldset>
                        <input type="text" name="name" id="name" />
                        <label for="name" class="form-label">Full Name</label>
                    </fieldset>

                    <h3></h3>
                    <fieldset>
                        <input type="number" name="phone" id="phone" />
                        <label for="phone" class="form-label">Phone Number</label>
                    </fieldset>

                    <h3></h3>
                    <fieldset>
                        <input type="email" name="email" id="email" />
                        <label for="email" class="form-label">Email ?</label>
                    </fieldset>

                    <h3></h3>
                    <fieldset>
                        <label for="move_in_date" class="select-form-label">Move in Date</label>
                        <select id="move_in_date" name="move_in_date">
                        <option value="Within 60 Days">Within 60 Days</option>
                        <option value="After 60 Days">After 60 Days</option>
                        </select>

                    </fieldset>
                </div>
            </form>
        </div>

И мой Javascript код 

<script>
(function($) {



    var form = $("#signup-form");
    form.validate({
        errorPlacement: function errorPlacement(error, element) {
             element.before(error); 
        },
        rules: {
            name : {
                required: true,
            },
            phone : {
                required: true,
            },
            email : {
                required: true,
            }
        },
        onfocusout: function(element) {
            $(element).valid();
        },
        highlight : function(element, errorClass, validClass) {
            $(element.form).find('.actions').addClass('form-error');
            $(element).parent().find('.form-label').addClass('form-label-error');
            $(element).removeClass('valid');
            $(element).addClass('error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element.form).find('.actions').removeClass('form-error');
            $(element).parent().find('.form-label').removeClass('form-label-error');
            $(element).removeClass('error');
            $(element).addClass('valid');
        }
    });
    form.children("div").steps({
        headerTag: "h3",
        bodyTag: "fieldset",
        transitionEffect: "fade",
        labels: {
            previous : '<i class="fas fa-chevron-left"></i>',
            next : '<i class="fas fa-chevron-right"></i>',
            finish : '<i class="fas fa-chevron-right"></i>'
        },
        onStepChanging: function (event, currentIndex, newIndex)
        {
             // Always allow going backward even if the current step contains invalid fields!
      if (currentIndex > newIndex) {
        return true;
      }

      var form = $(this);

      // Clean up if user went backward before
      if (currentIndex < newIndex) {
        // To remove error styles
        $(".body:eq(" + newIndex + ") label.error", form).remove();
        $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
      }

      // Disable validation on fields that are disabled or hidden.
      form.validate().settings.ignore = ":disabled,:hidden";

      // Start validation; Prevent going forward if false
      return form.valid();
    },
        onFinishing: function (event, currentIndex)
        {
            form.validate().settings.ignore = ":disabled";
            return form.valid();
        },
        onFinished: function (event, currentIndex)
        {
            form.parent().parent().append('<h1>Thanks, We will get back to you shortly.</h1>').parent().addClass('finished');
            form.submit();
            return true;
        },
        onStepChanged : function (event, currentIndex, priorIndex) {

            return true;
        }
    });

    jQuery.extend(jQuery.validator.messages, {
        required: "",
        remote: "",
        email: "",
        url: "",
        date: "",
        dateISO: "",
        number: "",
        digits: "",
        creditcard: "",
        equalTo: ""
    });
})(jQuery);
</script>

Не уверен, как реализовать ключевое слово вход. Как я хочу всякий раз, когда пользователь Заполняет поле и нажимает клавишу Enter, он должен go перейти к следующему шагу. Пожалуйста, ведите меня.

1 Ответ

0 голосов
/ 28 марта 2020

Ну, у меня есть решение моей проблемы. Вот оно 

jQuery('.signup-form').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    jQuery('a[href="#next"]').click();
    return false;  
  }
});
...