滚动到联系表格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

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

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

Answer 3

您试图在类更改时触发事件，但您当前的方法将无法正常工作。

我的建议是两件事。

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 4

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 5

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

/* 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 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

非常感谢他。