Запуск пользовательской функции, если контактная форма 7 возвращает недопустимое поле при отправке AJAX

Я использую плагин WordPress Контактная форма 7, и мне нужно манипулировать некоторыми данными, если есть ошибка в определенном поле , не уверен, что это можно сделать с помощью хуков или чего-то еще, поскольку мне нужно запустить некоторый код JavaScript, а не PHP, поэтому я предполагаю, что мне нужно будет прикрепить событие onclick, когда пользователь пытается отправить форму?

Если это можно сделать с помощью хука, я предполагаю, что это можно сделать с помощью этого.

Если это можно сделать с помощью крючка, как лучше всего это сделать? Если нет, я думаю, было бы достаточно просто прикрепить событие onclick к кнопке, но я не уверен, как заставить его работать только в случае ошибки проверки и после 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>

javascript wordpress ajax contact-form-7
person Brett    schedule 09.06.2015    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Возможно, самый простой способ добиться этого — поставить свои скрипты в очередь после контактной формы 7 (через functions.php или собственный плагин), добавить новую функцию и привязать ее к DOMSubtreeModified, а также проверить форму на наличие ошибок. .

В случае сбоя проверки функция AJAX контактной формы 7 добавляет элемент span с классом wpcf7-not-valid-tip (как показано в исходнике).

Вы можете настроить это для своего конкретного поля, выполнив что-то похожее на следующее:

Пример 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( 'stackoverflow-scripts', plugin_dir_url(__FILE__) . 'scripts.js', array('jquery'), null, true );
}
add_action( 'wpcf7_enqueue_scripts', 'so30727367_enqueue_scripts' );
person rnevius    schedule 12.06.2015
comment
Спасибо. Я сделаю это и посмотрю, как я пойду. - person Brett; 12.06.2015
comment
Хорошо, только что проверил это. Однако одна странная вещь, которую я заметил, заключалась в том, что когда я использовал функцию alert, чтобы проверить, работает ли она, казалось, что она находится в бесконечном цикле или что-то в этом роде, поскольку предупреждение продолжало появляться снова и снова после того, как я нажимал «ОК». - person Brett; 12.06.2015
comment
Хорошо, только что проверил это с помощью console.log('Success!'), и он вывел термин 125 раз по какой-то причине, ха-ха - person Brett; 12.06.2015
comment
А, я вижу, что происходит. Функция возвращает alert() каждый раз, когда модифицируется дерево DOM (что в данном случае происходит много раз). Дайте мне секунду, чтобы обновить функцию. - person rnevius; 12.06.2015
comment
Ааа подумал может быть это хаха - person Brett; 12.06.2015
comment
@Brett, я обновил JS, чтобы предотвратить проблему, с которой вы столкнулись. - person rnevius; 12.06.2015
comment
Хммм... Я пытаюсь показать/скрыть поле в зависимости от того, есть ли ошибка в этом поле, отображение ошибки работает нормально, однако я не могу заставить поле исчезнуть, как только оно отображается, даже если после повторной отправки в этом поле нет ошибки. Любые идеи по этому поводу? - person Brett; 12.06.2015
comment
Убедитесь, что вы снова прячете его прямо в начале функции submit()? - person rnevius; 12.06.2015
comment
Да, это то, что я сделал, но это не исчезнет. - person Brett; 12.06.2015
comment
Давайте продолжим обсуждение в чате. - person rnevius; 12.06.2015
comment
Как получить некоторое значение поля и использовать его на вкладке «Дополнительные настройки» формы? - person Mostafa; 13.04.2017

arrow_upward
-1
arrow_downward

вы можете использовать событие отправки формы:

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

тогда вам нужно будет остановить отправку формы, и вы опубликуете ее самостоятельно, случай загрузки файла также включен в этот хук, а ответ с сервера можно перехватить в 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
                               );
                        }
                    }

и обработчик успеха сообщения, где вы можете интерпретировать свой ответ для сервера:

function postSuccessHandler(data) {
//do something with returned html, json whatever
}
person SilentTremor    schedule 12.06.2015
comment
Но дело в том, что я хочу запустить код только если есть ошибка, поэтому я не хочу останавливать отправку формы (она основана на ajax, поэтому страница не перезагружается); Я просто хочу, чтобы он запускался после отправки формы, когда я могу проверить указанную ошибку, а затем выполнить необходимые действия. - person Brett; 12.06.2015
comment
Точно, ваша страница не загружается, вы отправляете форму через ajax и интерпретируете ответ запроса сервера по возвращенному html как строку, без перезагрузки страницы вы можете это сделать. В любом случае вы можете попытаться что-то найти, но с этим вы можете делать плавные вещи: отправить форму (без обновления страницы), поймать ответ, найти ошибку (например, на основе html), если обнаружена ошибка, указать на проблему. - person SilentTremor; 12.06.2015

arrow_upward
-1
arrow_downward

Вот некоторый код, чтобы вы начали:

$(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();" Ссылка

Или вы можете просто посмотреть, есть ли в форме ошибка при загрузке страницы:

$(function () {
    function checkErrors(){
        var invalid = $('.wpcf7-form').hasClass('invalid');
        var error = $('.wpcf7-form').hasClass('error');
        if (!invalid && !error) {
            return true;
        }
        return false;
    }
    checkErrors();
});
person Conjak    schedule 12.06.2015
comment
on_sent_ok не сработает, так как при ошибках проверки ничего не будет отправлено - person rnevius; 12.06.2015