JQuery Bootstrap 4 Modal with Tabs 内的验证表单不会提交
JQuery Validation Form inside a Bootstrap 4 Modal with Tabs won't submit
我在 JQuery 带有选项卡的模态内验证时遇到问题。
在“登录”选项卡上，当我单击“登录”按钮时，验证错误按预期弹出：
问题 1
但是在“新建帐户”选项卡上，当我单击“开始使用”按钮时。什么都没发生。提交处理程序未触发，验证错误消息仅在我键入内容时出现。
问题 2
当我单击“忘记密码”Link 时，它会将我带到同一模式中的另一个选项卡。但是当我按下 "Reset Password" 按钮时，我得到另一个错误：
{"error":"key missing: title"}
我做错了什么？ 是否可以让 3 个提交处理程序为模式中的三个不同选项卡正常工作？
使用此 fiddle 解决问题：
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 单击 FIDDLE。请让我知道是否可以解决这些问题。谢谢..
在 注册表单 的验证器中，您应该为电子邮件输入添加规则，例如：
rules: {
email: {email:true, required:true}
}
我将它添加到这个 fiddle 中并且有效：https://jsfiddle.net/h6onufs5/4/
希望对您有所帮助
我在 JQuery 带有选项卡的模态内验证时遇到问题。
在“登录”选项卡上，当我单击“登录”按钮时，验证错误按预期弹出：
问题 1
但是在“新建帐户”选项卡上，当我单击“开始使用”按钮时。什么都没发生。提交处理程序未触发，验证错误消息仅在我键入内容时出现。
问题 2
当我单击“忘记密码”Link 时，它会将我带到同一模式中的另一个选项卡。但是当我按下 "Reset Password" 按钮时，我得到另一个错误：
{"error":"key missing: title"}
我做错了什么？ 是否可以让 3 个提交处理程序为模式中的三个不同选项卡正常工作？
使用此 fiddle 解决问题： 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 单击 FIDDLE。请让我知道是否可以解决这些问题。谢谢..
在 注册表单 的验证器中，您应该为电子邮件输入添加规则，例如：
rules: {
email: {email:true, required:true}
}
我将它添加到这个 fiddle 中并且有效：https://jsfiddle.net/h6onufs5/4/
希望对您有所帮助