Javascript 滚动至联系人表单7（wordpress）中的已验证字段

使用Wordpress和插件联系人表单7，我想使用jQuery滚动到验证失败的字段

当未检测到错误时，这是表单的顶部：

<form action="/chanton/#wpcf7-f111-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">

---

第一个观察，ON是针对事件而不是类的

请尝试删除中的句点。无效。如果这无助于将其更改为：

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

---

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. 
   }
}

JsFiddle：

---

CF7上有多个自定义jquery事件触发器。
基于

新增：引入5个新的jQuery自定义事件触发器（invalid.wpcf7， spam.wpcf7、mailssent.wpcf7、mailfiled.wpcf7、submit.wpcf7）

所以你基本上可以这样做

$(document).ready(function() {
    $(".wpcf7").on('wpcf7:invalid', function(e) {
        //do something when submission is invalid
    });
});

---

这个代码对我来说很好，试试这个

/* Contact form 7 */
$(document).ready(function() {$(".wpcf7").on('wpcf7:invalid', function(e) {$('html, body').animate({scrollTop: $(".wpcf7-not-valid").first().offset().top - 30}, 1000);});});

见演示

从Patrick Kahl编写的代码中找到了一个感谢您的版本-解决了问题-将脚本放在页面顶部第一个div的上方-在联系人7表单上方的div中提供div id，然后将该div id放在js脚本中-viola-效果很好-寻找了很久

---

多谢他

抱歉-不应该出现这种情况，我两个都试过了。奇怪-就像我想的那样，尝试使用控制台消息来查看表单是否至少已完成。这会让你知道它是否至少触发了你需要加入的事件。它没有被调用，我的表单是由AJAX提交的吗？WPCF7说它支持AJAX表单提交，只是为了测试我在一个新的WP字段中旋转它，我的代码在控制台中工作。在提交表单之前，请确保已将其包装在document.ready中或在控制台中运行它。

$（document.ready（函数（）{$（'.wpcf7 form'）.ajaxComplete（函数（）{console.log（'表单无效'）；if（$）（this.hasClass（'无效'）{console.log（'表单无效'）；scrollTop:$(“.wpcf7无效”）.first（）.offset（）.top-30}}；}）；

知道什么时候触发了invalid.wpcf7和submit.wpcf7吗？文档不存在..我找不到。。

$(document).ready(function() {
    $(".wpcf7").on('wpcf7:invalid', function(e) {
        //do something when submission is invalid
    });
});

/* Contact form 7 */
$(document).ready(function() {$(".wpcf7").on('wpcf7:invalid', function(e) {$('html, body').animate({scrollTop: $(".wpcf7-not-valid").first().offset().top - 30}, 1000);});});

;(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));