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上方的顶部-在contact 7表单上方的div中给出了一个div id然后放置了该div id在js脚本中-中提琴-就像一种魅力-多年来一直在寻找它；

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

非常感谢他。

滚动到联系表格7中的验证字段（wordpress）

6 个答案: