在jQuery验证中单击next按钮和按enter键之间的区别

differences between clicking next button and hitting enter on jQuery validate

本文关键字：enter 之间区别按钮验证 jQuery 单击 next 更新时间：2023-09-26

我有一个jQuery验证表单，它不会让用户下一步，直到他完成表单。

有趣的是，用户不能通过按下Next键来更进一步，而是可以通过点击输入来发布表单。

参见示例:https://jsfiddle.net/r6sztnsh/1/

继续并禁用用户点击进入是另一回事，但我想点击进入与点击Next按钮做同样的事情。

Java脚本:

   $(document).ready(function(){
        // Custom method to validate username
        $.validator.addMethod("usernameRegex", function(value, element) {
            return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
        }, "Username must contain only letters, numbers");
        $(".next").click(function(){
            var form = $("#myform");
            form.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                highlight: function(element, errorClass, validClass) {
                    $(element).closest('.form-group').addClass("has-error");
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).closest('.form-group').removeClass("has-error");
                },
                rules: {
                    username: {
                        required: true,
                        usernameRegex: true,
                        minlength: 6,
                    },
                    password : {
                        required: true,
                    },
                    conf_password : {
                        required: true,
                        equalTo: '#password',
                    },
                    company:{
                        required: true,
                    },
                    url:{
                        required: true,
                    },
                    name: {
                        required: true,
                        minlength: 3,
                    },
                    email: {
                        required: true,
                        minlength: 3,
                    },
                },
                messages: {
                    username: {
                        required: "Username required",
                    },
                    password : {
                        required: "Password required",
                    },
                    conf_password : {
                        required: "Password required",
                        equalTo: "Password don't match",
                    },
                    name: {
                        required: "Name required",
                    },
                    email: {
                        required: "Email required",
                    },
                }
            });
            if (form.valid() === true){
                if ($('#account_information').is(":visible")){
                    current_fs = $('#account_information');
                    next_fs = $('#company_information');
                }else if($('#company_information').is(":visible")){
                    current_fs = $('#company_information');
                    next_fs = $('#personal_information');
                }
                next_fs.show(); 
                current_fs.hide();
            }
        });
        $('#previous').click(function(){
            if($('#company_information').is(":visible")){
                current_fs = $('#company_information');
                next_fs = $('#account_information');
            }else if ($('#personal_information').is(":visible")){
                current_fs = $('#personal_information');
                next_fs = $('#company_information');
            }
            next_fs.show(); 
            current_fs.hide();
        });
    });

*

我猜魔法会在$(".next").click(function(){ var form = $("#myform");附近发生:)

关于点击输入与点击Next相同的想法吗?

所以你想让回车键做同样的事情点击下一个按钮?基于您的jsfiddle for your form:

$('.form-horizontal').keypress(function (event) {
    if (event.which === 13) {
        $(".next").trigger('click');
    }
});

使用事件'submit'阻止表单不完整时的提交:

form.on('submit',fonction(pEvent){
    if(/* form not complete */) {
        pEvent.preventDefault();
    }
});