滚动到联系表格 7 (wordpress) 中的已验证字段

Question

使用 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);
    });
});

Answer 1

首先观察，ON 是针对事件而不是类。

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

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

Answer 2

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

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

查看演示here

Answer 3

IIRC，WPCF7 提交应该触发 ajaxComplete。尝试以下作为您的事件处理程序：

jQuery('.wpcf7-form').ajaxComplete( function(){    
  if(jQuery(this).hasClass('invalid')){
    console.log('The form is invalid.');
    // Insert your code here
  }
});

Answer 4

您正试图在类更改时触发一个事件，但您当前的方法不会真正起作用。

我的建议是两件事。

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： https://jsfiddle.net/gregborbonus/w963mtkx/

Answer 5

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

Answer 6

;(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 上方 - 在联系人 7 表单上方的 div 中提供一个 div id，然后放置该 div id在 js 脚本中 - 中提琴 - 就像一个魅力 - 多年来一直在寻找它；

https://codepen.io/patrickkahl/pen/KFmAb

非常感谢他。