javascript - 滚动到联系表格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用于事件NOT类。

尝试删除.invalid中的句点。如果那没有帮助将其更改为：

$(".wpcf7 input").on("invalid", function(e) {