使用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
非常感谢他。