滚动至联系人表格7中的已验证字段(wordpress)
Scroll to validated field in contact form 7 (wordpress)
使用Wordpress和插件Contact Form 7,我想使用jQuery滚动到验证失败的字段。
当没有检测到错误时,这是表单的顶部:
<form action="/chanton/#wpcf7-f111-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
失败时添加无效类:
<form action="/chanton/#wpcf7-f111-o1" method="post" class="wpcf7-form invalid" enctype="multipart/form-data" novalidate="novalidate">
字段本身接收wpcf7-not-valid
类。
我已经将以下代码添加到我的主题中,但它在重载时被调用,但不起作用。
$(document).ready(function() {
console.log('error being called');
$(".wpcf7").on('invalid', function(e) {
$('html, body').animate({
scrollTop: $(".wpcf7-not-valid").first().offset().top - 30
}, 2000);
});
});
第一个观察结果是,ON用于事件而非类。
尝试删除中的句点。invalid。如果这没有帮助,请将其更改为:
$(".wpcf7 input").on("invalid", function(e) {
这段代码对我来说很好,试试这个。
/* Contact form 7 */
$(document).ready(function() {$(".wpcf7").on('wpcf7:invalid', function(e) {$('html, body').animate({scrollTop: $(".wpcf7-not-valid").first().offset().top - 30}, 1000);});});
请参阅此处的演示
IIRC,WPCF7提交应触发ajaxComplete。尝试以下操作作为事件处理程序:
jQuery('.wpcf7-form').ajaxComplete( function(){
if(jQuery(this).hasClass('invalid')){
console.log('The form is invalid.');
// Insert your code here
}
});
您正试图在类更改时触发事件,但您当前的方法无法真正工作。
我的建议是两件事。
1,如果你可以更改使表单无效的函数,那么你应该使你的代码成为一个函数,并在同一块代码中触发它。
2,如果这不是一个选项,你可以确保你的表单包含在一个元素中,比如div,然后你需要添加一个突变事件监听器:
var element = $('.wpcf7').get(0);
var observer = new WebKitMutationObserver(function (mutations) {
mutations.forEach(attrModified);
});
observer.observe(element, { attributes: true, subtree: false });
function attrModified(mutation) {
el=$(mutation.target);
if(el.hasClass('invalid') && el.hasClass('wpcf7')){
alert('Invalid'); //Change this to whatever should happen, in this case, a scroll. remember, el is your form.
}
}
Js报价:https://jsfiddle.net/gregborbonus/w963mtkx/
CF7上有多个自定义jquery事件触发器。
基于http://contactform7.com/2012/09/24/contact-form-7-33/
新增:引入5个新的jQuery自定义事件触发器(invalid.wpcf7,spam.wpcf7、mailsent.wpcf7,mailfailed.wpcf7,submit.wpcf7.)。
所以你基本上可以做一些类似的事情
$(document).ready(function() {
$(".wpcf7").on('wpcf7:invalid', function(e) {
//do something when submission is invalid
});
});
;(function($){
/**
* Store scroll position for and set it after reload
*
* @return {boolean} [localStorage is available]
*/
$.fn.scrollPosReaload = function(){
if (localStorage) {
var posReader = localStorage["posStorage"];
if (posReader) {
$(window).scrollTop(posReader);
localStorage.removeItem("posStorage");
}
$(this).click(function(e) {
localStorage["posStorage"] = $(window).scrollTop();
});
return true;
}
return false;
}
/* ================================================== */
$(document).ready(function() {
// Feel free to set it for any element who trigger the reload
$('select').scrollPosReaload();
});
}(jQuery));
感谢Patrick Kahl编写的代码为您找到了一个-解决了问题-将脚本放在第一个div上方的页面顶部-在contact 7表单上方的div中,给出一个div id,然后将该div id放在js脚本中-viola-工作起来很有魅力-找了很久了;
https://codepen.io/patrickkahl/pen/KFmAb
非常感谢他。
- Rad网格编辑模式通过选中复选框时的java脚本启用禁用所需的字段验证器
- 回发前所需的字段验证程序不起作用
- 将字段设置为有条件地使用所需的字段验证器
- .NET MVC 5 不显眼的禁用字段验证
- Liferay网络表单组件字段验证
- 输入字段验证的键代码函数在chrome中没有按预期工作
- MVC 5防止隐藏字段的必需字段验证
- jQuery字段验证-是否为空,以及正确的值
- JS如何捕获基于键入然后删除的字符的字段验证逻辑
- Javascript Wordpress字段验证匹配
- 字段验证器,它不允许移动到下一个字段
- 在更改另一个字段时触发Yii字段验证
- 进度条和所需字段验证器
- 字段验证:字段需要 JavaScript 正则表达式
- JS 字段验证 - 循环遍历对象,每个字段有三个数据注意事项
- Javascript 空字段验证 - 无法读取未定义的属性“值”
- 有没有办法知道 .net 必填字段验证器是否从 js 启用或禁用
- 避免在字段验证失败时调用 AJAX onsuccess
- 使用 jQuery 使用 asp.net 必填字段验证器验证必填字段
- 如何使用 Angular.js/Javascript 为 url 添加输入字段验证