运行如果联系表格 7 returns AJAX 提交上的无效字段，则自定义函数

Question

我正在使用 WordPress 插件 Contact Form 7，如果特定字段出现错误，我需要处理一些数据，不确定是否可以使用挂钩或其他任何方式来完成我需要运行一些 JavaScript 代码而不是 PHP，所以我假设当用户尝试提交表单时我需要附加一个 onclick 事件？

如果可以用钩子完成，我想它会用 this one 完成。

如果可以用钩子完成，最好的方法是什么？如果没有，我想将 onclick 事件附加到按钮就足够容易了，但我不确定如何才能将其设置为运行只有在出现验证错误并且 after CF7 JS代码已经运行?

形式的HTML：

<div role="form" class="wpcf7" id="wpcf7-f1304-p10-o1" lang="en-US" dir="ltr">
    <div class="screen-reader-response"></div>
    <form name="" action="/freetrademarksearch/#wpcf7-f1304-p10-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
        <div style="display: none;">
            <input type="hidden" name="_wpcf7" value="1304" />
            <input type="hidden" name="_wpcf7_version" value="4.1.2" />
            <input type="hidden" name="_wpcf7_locale" value="en_US" />
            <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1304-p10-o1" />
            <input type="hidden" name="_wpnonce" value="a2009d4694" />
        </div>
        <div class="field_wrapper">
            <p class="title">Trademark to be searched</p>
            <div class="field">
                <span class="wpcf7-form-control-wrap trademark"><input type="text" name="trademark" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" /></span>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">Upload Logo <span class="optional">(optional)</span></p>
            <div class="field">
                <div class="btn browse_btn">
                    <span class="wpcf7-form-control-wrap logo"><input type="file" name="logo" value="1" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" /></span>
                </div>
                <div class="wp_is_annoying">
                    <span id="upload_filename" class="file_chosen">No file selected</span>
                </div>
                </p>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">Goods/Services the trademark is, or will be, used to identify</p>
            <div class="field">
                <span class="wpcf7-form-control-wrap identify"><input type="text" name="identify" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" aria-required="true" aria-invalid="false" /></span>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">If you already promote this in Australia, what was the first date of promotion?</p>
            <div class="field">
                <span class="wpcf7-form-control-wrap date-promoted"><input type="text" name="date-promoted" value="" size="40" class="wpcf7-form-control wpcf7-text form-control" aria-invalid="false" /></span>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">Has promotion been continuous since the above date?</p>
            <div class="field radio_btns">
                <div class="holder">
                    <span class="wpcf7-form-control-wrap continuous_promotion"><span class="wpcf7-form-control wpcf7-radio" id="yes_continuous_promotion"><span class="wpcf7-list-item first last"><label><input type="radio" name="continuous_promotion" value="Yes" />&nbsp;<span class="wpcf7-list-item-label">Yes</span></label></span></span></span>
                </div>
                <div class="holder">
                    <span class="wpcf7-form-control-wrap continuous_promotion"><span class="wpcf7-form-control wpcf7-radio" id="no_continuous_promotion"><span class="wpcf7-list-item first last"><label><input type="radio" name="continuous_promotion" value="No" />&nbsp;<span class="wpcf7-list-item-label">No</span></label></span></span></span>
                </div>
                </p>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">Full Name</p>
            <div class="field half">
                <span class="wpcf7-form-control-wrap first-name"><input type="text" name="first-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required first form-control" aria-required="true" aria-invalid="false" placeholder="First Name" /></span><span class="wpcf7-form-control-wrap last-name"><input type="text" name="last-name" value="" size="40" class="wpcf7-form-control wpcf7-text form-control" aria-invalid="false" placeholder="Last Name" /></span>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">Email Address:</p>
            <div class="field">
                <span class="wpcf7-form-control-wrap email"><input type="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" aria-required="true" aria-invalid="false" /></span>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">Phone Number:</p>
            <div class="field">
                <span class="wpcf7-form-control-wrap phone"><input type="text" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text form-control" aria-invalid="false" /></span>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">Comment: <span class="optional">(optional)</span></p>
            <div class="field">
                <span class="wpcf7-form-control-wrap comments"><textarea name="comments" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea form-control" aria-invalid="false"></textarea></span><br />
                <span class="wpcf7-form-control-wrap hello-wrap" style="display:none !important;visibility:hidden !important;"><input class="wpcf7-form-control wpcf7-text"  type="text" name="hello" value="" size="40" tabindex="-1" /><br><small>Please leave this field empty.</small></span>
            </div>
        </div>
        <div class="field_wrapper">
            <p class="title">How did you find us? <span class="optional">(optional)</span></p>
            <div class="field">
                <span class="wpcf7-form-control-wrap find-us"><input type="text" name="find-us" value="" size="40" class="wpcf7-form-control wpcf7-text form-control" aria-invalid="false" /></span>
            </div>
        </div>
        <div class="field_wrapper subscribe">
            <div class="field">
                <div class="td">
                    <span class="wpcf7-form-control-wrap newsletter"><span class="wpcf7-form-control wpcf7-checkbox" id="newsletter"><span class="wpcf7-list-item first last"><input type="checkbox" name="newsletter[]" value="yes" />&nbsp;<span class="wpcf7-list-item-label">yes</span></span></span></span>
                </div>
                <div class="td">
                    <label for="newsletter">I would like to receive newsletters from time to time.</label>
                </div>
                </p>
            </div>
        </div>
        <div class="field_wrapper submit">
            <div class="field">
                <input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit btn" />
            </div>
        </div>
        <div class="wpcf7-response-output wpcf7-display-none"></div>
    </form>
</div>

Answer 1

您可以利用表单提交事件：

//attach handler on form submit
var formID = "myForm";
$('form#' + formID).submit(catchSubmit);

然后您将需要停止表单提交，您将 post 自己完成，文件上传案例也包含在此挂钩中，服务器的响应可以在 JavaScript 中捕获并处理：

//custom handler for form submit
                    function catchSubmit(event) {
                        var uploadFileType = $('form#' + formID).attr('enctype') != undefined ? $('form#' + formID).attr('enctype').indexOf('multipart/form-data') != -1 ? true : false : false; //test if form has upload file functionality
                        event.preventDefault(); //stop html form post
                        if (uploadFileType) {
                            //ajax call for model + file upload
                            $.ajax({
                                url: $(this).attr("action"),
                                type: 'POST',
                                data: new FormData(this),
                                success: postSuccessHandler,
                                processData: false,
                                contentType: false
                            });
                            return;
                        }
                        else {
                            // ajax call for simple model/inputs
                            $.post($(this).attr("action"),
                               $(this).serialize(),
                               postSuccessHandler
                               );
                        }
                    }

和一个 post 成功处理程序，您可以在其中解释您对服务器的响应：

function postSuccessHandler(data) {
//do something with returned html, json whatever
}

Answer 2

可能实现此目的的最简单方法是在 Contact Form 7 之后将您的脚本加入队列（通过 functions.php 或您的自定义插件），添加一个新函数并绑定它到 DOMSubtreeModified，并检查表格是否有错误。

当验证失败时，Contact Form 7 的 AJAX 函数会添加一个 span 元素，其 class 为 wpcf7-not-valid-tip（如 in the source 所示）。

您可以针对您的特定领域进行定位，方法如下：

示例 JS：

(function($){
    $('div.wpcf7 > form').submit(function(){
        // The name of a single field you're interested in targeting 
        var fieldName = 'some-field-name';

        $(this).find('span.' + fieldName).bind('DOMSubtreeModified', function(event) {
            // If an error has been appended to this input's parent span, do something
            if ( $(this).children('.wpcf7-not-valid-tip').length ) {
                // RUN YOUR FUNCTION HERE

                // Prevent this function from running multiple times
                $(this).off(event);
            }
        });
    });
})(jQuery);

使用 wpcf7_enqueue_scripts 使您的脚本入队，以便在默认的 Contact Form 7 脚本（您的路径可能不同）之后将它们入队：

/**
 * Enqueue Scripts with CF7 Dependencies
 */
function so30727367_enqueue_scripts() {
    wp_enqueue_script( 'Whosebug-scripts', plugin_dir_url(__FILE__) . 'scripts.js', array('jquery'), null, true );
}
add_action( 'wpcf7_enqueue_scripts', 'so30727367_enqueue_scripts' );

Answer 3

这里有一些代码可以帮助您入门：

$(function () {
    // Optional nice scroll function
    function scrollTop(myTop){
        var myTop = (typeof myTop==='undefined'||myTop === null) ? 150 : myTop;
        $("html, body").animate({
        scrollTop: myTop
        }, 300);
    }
    $('.wpcf7-form').submit(function(event){
        var valid = true;
        $('[aria-required]').each(function(i,ele){
            if(ele.value == ''){
                $(this).parent().parent().addClass('alert');
                console.log('Required field empty: '+ ele.name);
                valid = false;
            }
        });

        // Handle additional validation here, set valid too false if it does not pass

        if (!valid){
            event.preventDefault();
            scrollTop();
            return false;
        }
        return true;
    });
});

编辑：

~~或on_sent_ok："doFunction();" Link~~

或者您可以只查看表单是否在页面加载时出错：

$(function () {
    function checkErrors(){
        var invalid = $('.wpcf7-form').hasClass('invalid');
        var error = $('.wpcf7-form').hasClass('error');
        if (!invalid && !error) {
            return true;
        }
        return false;
    }
    checkErrors();
});

运行如果联系表格 7 returns AJAX 提交上的无效字段，则自定义函数

Running a custom function if Contact Form 7 returns an invalid field on AJAX submit

javascript

ajax

wordpress

contact-form-7

运行 如果联系表格 7 returns AJAX 提交上的无效字段，则自定义函数

Running a custom function if Contact Form 7 returns an invalid field on AJAX submit

javascript

ajax

wordpress

contact-form-7

运行如果联系表格 7 returns AJAX 提交上的无效字段，则自定义函数