Question

我在带有标签的模态中遇到有关JQuery验证的问题。

在“登录”选项卡上，当我单击“登录”按钮时，验证错误会按预期弹出：

问题1

但是在“新帐户”选项卡上，当我单击“入门”按钮时。什么都没发生。提交处理程序不会触发，并且仅当我键入内容时才会显示验证错误消息。

问题2

当我单击“忘记密码”链接时，它将带我到相同模式的另一个选项卡。但是，当我按下“重置密码”按钮时，出现了另一个错误：

{“错误”：“键缺失：标题”}

我在做什么错？ 是否可以让3个提交处理程序针对模式中的三个不同选项卡正常工作？

使用此小提琴进行故障排除： https://jsfiddle.net/h6onufs5/

JS：

(function(){
    //Login/Signup modal window - by CodyHouse.co
    function ModalSignin( element ) {
        this.element = element;
        this.blocks = this.element.getElementsByClassName('js-signin-modal-block');
        this.switchers = this.element.getElementsByClassName('js-signin-modal-switcher')[0].getElementsByTagName('a'); 
        this.triggers = document.getElementsByClassName('js-signin-modal-trigger');
        this.hidePassword = this.element.getElementsByClassName('js-hide-password');
        this.init();
    };

    ModalSignin.prototype.init = function() {
        var self = this;
        //open modal/switch form
        for(var i =0; i < this.triggers.length; i++) {
            (function(i){
                self.triggers[i].addEventListener('click', function(event){
                    if( event.target.hasAttribute('data-signin') ) {
                        event.preventDefault();
                        self.showSigninForm(event.target.getAttribute('data-signin'));
                    }
                });
            })(i);
        }

        //close modal
        this.element.addEventListener('click', function(event){
            if( hasClass(event.target, 'js-signin-modal') || hasClass(event.target, 'js-close') ) {
                event.preventDefault();
                removeClass(self.element, 'cd-signin-modal--is-visible');
            }
        });
        //close modal when clicking the esc keyboard button
        document.addEventListener('keydown', function(event){
            (event.which=='27') && removeClass(self.element, 'cd-signin-modal--is-visible');
        });

        //hide/show password
        for(var i =0; i < this.hidePassword.length; i++) {
            (function(i){
                self.hidePassword[i].addEventListener('click', function(event){
                    self.togglePassword(self.hidePassword[i]);
                });
            })(i);
        } 

        //IMPORTANT - REMOVE THIS - it's just to show/hide error messages in the demo
        this.blocks[0].getElementsByTagName('form')[0].addEventListener('submit', function(event){
            event.preventDefault();
            self.toggleError(document.getElementById('signin-email'), true);
        });
        this.blocks[1].getElementsByTagName('form')[0].addEventListener('submit', function(event){
            event.preventDefault();
            self.toggleError(document.getElementById('signup-username'), true);
        });
    };

    ModalSignin.prototype.togglePassword = function(target) {
        var password = target.previousElementSibling;
        ( 'password' == password.getAttribute('type') ) ? password.setAttribute('type', 'text') : password.setAttribute('type', 'password');
        target.textContent = ( 'Hide' == target.textContent ) ? 'Show' : 'Hide';
        putCursorAtEnd(password);
    }

    ModalSignin.prototype.showSigninForm = function(type) {
        // show modal if not visible
        !hasClass(this.element, 'cd-signin-modal--is-visible') && addClass(this.element, 'cd-signin-modal--is-visible');
        // show selected form
        for( var i=0; i < this.blocks.length; i++ ) {
            this.blocks[i].getAttribute('data-type') == type ? addClass(this.blocks[i], 'cd-signin-modal__block--is-selected') : removeClass(this.blocks[i], 'cd-signin-modal__block--is-selected');
        }
        //update switcher appearance
        var switcherType = (type == 'signup') ? 'signup' : 'login';
        for( var i=0; i < this.switchers.length; i++ ) {
            this.switchers[i].getAttribute('data-type') == switcherType ? addClass(this.switchers[i], 'cd-selected') : removeClass(this.switchers[i], 'cd-selected');
        } 
    };

    ModalSignin.prototype.toggleError = function(input, bool) {
        // used to show error messages in the form
        toggleClass(input, 'cd-signin-modal__input--has-error', bool);
        toggleClass(input.nextElementSibling, 'cd-signin-modal__error--is-visible', bool);
    }

    var signinModal = document.getElementsByClassName("js-signin-modal")[0];
    if( signinModal ) {
        new ModalSignin(signinModal);
    }

    // toggle main navigation on mobile
    var mainNav = document.getElementsByClassName('js-main-nav')[0];
    if(mainNav) {
        mainNav.addEventListener('click', function(event){
            if( hasClass(event.target, 'js-main-nav') ){
                var navList = mainNav.getElementsByTagName('ul')[0];
                toggleClass(navList, 'cd-main-nav__list--is-visible', !hasClass(navList, 'cd-main-nav__list--is-visible'));
            } 
        });
    }

    //class manipulations - needed if classList is not supported
    function hasClass(el, className) {
        if (el.classList) return el.classList.contains(className);
        else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
    }
    function addClass(el, className) {
        var classList = className.split(' ');
        if (el.classList) el.classList.add(classList[0]);
        else if (!hasClass(el, classList[0])) el.className += " " + classList[0];
        if (classList.length > 1) addClass(el, classList.slice(1).join(' '));
    }
    function removeClass(el, className) {
        var classList = className.split(' ');
        if (el.classList) el.classList.remove(classList[0]);    
        else if(hasClass(el, classList[0])) {
            var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
            el.className=el.className.replace(reg, ' ');
        }
        if (classList.length > 1) removeClass(el, classList.slice(1).join(' '));
    }
    function toggleClass(el, className, bool) {
        if(bool) addClass(el, className);
        else removeClass(el, className);
    }

    //credits http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
    function putCursorAtEnd(el) {
        if (el.setSelectionRange) {
            var len = el.value.length * 2;
            el.focus();
            el.setSelectionRange(len, len);
        } else {
            el.value = el.value;
        }
    };
})();



$('#login-form').validate ({

        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",
    errorElement: 'div',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    onError : function(){
        $('.input-group.error-class').find('.help-block.form-error').each(function() {
          $(this).closest('.form-control').addClass('error-class').append($(this));
        });
    },

        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 40
            },

          password: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
            },

        messages: {
            username: {
                required: "Please enter your username or email address",
                minlength: "Usernames can't be shorter than three characters",
                maxlength: "Usernames or emails must be shorter than forty characters."
            },
                       password: {
                required: "Please enter your password",
                minlength: "Passwords can't be shorter than seven characters",
                maxlength: "Passwords must be shorter than forty characters."
            },

                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        },

  submitHandler: function() {  
            $('#noenter').show();   

        }

    });


    $("#signup-form").validate ({

        // validation rules for registration formd
    errorClass: "error-class",
    validClass: "valid-class",
    errorElement: 'div',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    onError : function(){
        $('.input-group.error-class').find('.help-block.form-error').each(function() {
          $(this).closest('.form-group').addClass('error-class').append($(this));
        });
    },


        messages: {
            email: {
                required: "Please enter your email address",

            },


                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        }

    });


   $("#password-form").validate ({

        // validation rules for registration formd
    errorClass: "error-class",
    validClass: "valid-class",
    errorElement: 'div',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    onError : function(){
        $('.input-group.error-class').find('.help-block.form-error').each(function() {
          $(this).closest('.form-group').addClass('error-class').append($(this));
        });
    },


        messages: {
            email: {
                required: "Please enter your email address",

            },


                highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        }

    });

对于HTML单击该字段。请让我知道是否可以解决这些问题。谢谢。

Answer 1

在注册表单的验证器中，您应该添加电子邮件输入规则，例如：

rules: {
    email: {email:true, required:true}
  }

我在此小提琴中添加了它，它的工作原理是：https://jsfiddle.net/h6onufs5/4/

希望这会有所帮助

带有标签的Bootstrap 4模式中的JQuery验证表单不会提交

1 个答案: