• Resolved marketingflotte

    (@marketingflotte)


    Hello there,

    recently we switched from reCaptcha to hCaptcha and noticed that there seems to be a problem with the NinjaForms Addon hCaptcha field and the usage of an file upload field. As long as the hCaptcha field ist present in the form the upload field in this form is no longer working and a JS Console error appears. Here are the details from the JS console in google chrome:

    jquery-migrate.min.js?ver=3.4.1:2 JQMIGRATE: Migrate is installed, version 3.4.1
    [Violation] Forced reflow while executing JavaScript took 31ms
    front-end.js?ver=3.8.3:1 [Violation] 'setTimeout' handler took 59ms
    Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox.
    hcaptcha-nf.min.js?ver=4.2.1:1 Uncaught TypeError: i.startsWith is not a function
    at hcaptcha-nf.min.js?ver=4.2.1:1:977
    at Function.<anonymous> (jquery.min.js?ver=3.7.1:2:72498)
    at Function.each (jquery.min.js?ver=3.7.1:2:3129)
    at l (jquery.min.js?ver=3.7.1:2:72464)
    at Vt (jquery.min.js?ver=3.7.1:2:72629)
    at Function.ajax (jquery.min.js?ver=3.7.1:2:74869)
    at Function.<anonymous> (jquery-migrate.min.js?ver=3.4.1:2:4771)
    at e.<computed> [as ajax] (jquery-migrate.min.js?ver=3.4.1:2:1582)
    at send (jquery.fileupload.js?ver=3.3.16:1014:17)
    at x.<computed>.<computed>._onSend (jquery.fileupload.js?ver=3.3.16:1084:14)
    (anonym) @ hcaptcha-nf.min.js?ver=4.2.1:1
    (anonym) @ jquery.min.js?ver=3.7.1:2
    each @ jquery.min.js?ver=3.7.1:2
    l @ jquery.min.js?ver=3.7.1:2
    Vt @ jquery.min.js?ver=3.7.1:2
    ajax @ jquery.min.js?ver=3.7.1:2
    (anonym) @ jquery-migrate.min.js?ver=3.4.1:2
    e.<computed> @ jquery-migrate.min.js?ver=3.4.1:2
    send @ jquery.fileupload.js?ver=3.3.16:1014
    _onSend @ jquery.fileupload.js?ver=3.3.16:1084
    r.<computed> @ core.min.js?ver=1.13.2:116
    data.submit @ jquery.fileupload.js?ver=3.3.16:764
    maybeSubmitFieldData @ fieldFile.js?ver=3.3.16:127
    add @ fieldFile.js?ver=3.3.16:228
    _trigger @ core.min.js?ver=1.13.2:116
    (anonym) @ jquery.fileupload.js?ver=3.3.16:1157
    each @ jquery.min.js?ver=3.7.1:2
    _onAdd @ jquery.fileupload.js?ver=3.3.16:1150
    r.<computed> @ core.min.js?ver=1.13.2:116
    (anonym) @ jquery.fileupload.js?ver=3.3.16:1357
    c @ jquery.min.js?ver=3.7.1:2
    add @ jquery.min.js?ver=3.7.1:2
    always @ jquery.min.js?ver=3.7.1:2
    _onChange @ jquery.fileupload.js?ver=3.3.16:1345
    r.<computed> @ core.min.js?ver=1.13.2:116
    i @ core.min.js?ver=1.13.2:116
    dispatch @ jquery.min.js?ver=3.7.1:2
    v.handle @ jquery.min.js?ver=3.7.1:2

    Is this a known bug or a way to prevent this from happening?
    Thanks and regards
    Bernhard

Viewing 1 replies (of 1 total)
  • Plugin Contributor kaggdesign

    (@kaggdesign)

    Hello,

    Thank you for reporting. You can take this code, and save as assets/js/hcaptcha-nf.js and assets/js/hcaptcha-nf.min.js files, replacing them.

    /**
    * Ninja Forms controller file.
    */

    /* global hcaptcha, Marionette, Backbone */

    wp.hooks.addFilter(
    'hcaptcha.ajaxSubmitButton',
    'hcaptcha',
    ( isAjaxSubmitButton, submitButtonElement ) => {
    if ( submitButtonElement.classList.contains( 'nf-element' ) ) {
    return true;
    }

    return isAjaxSubmitButton;
    }
    );

    document.addEventListener( 'DOMContentLoaded', function() {
    const HCaptchaFieldController = Marionette.Object.extend( {
    initialize() {
    // On the Form Submission's field validation.
    const submitChannel = Backbone.Radio.channel( 'submit' );
    this.listenTo( submitChannel, 'validate:field', this.updateHcaptcha );
    this.listenTo( submitChannel, 'validate:field', this.updateHcaptcha );

    // On the Field's model value change.
    const fieldsChannel = Backbone.Radio.channel( 'fields' );
    this.listenTo( fieldsChannel, 'change:modelValue', this.updateHcaptcha );
    },

    updateHcaptcha( model ) {
    // Only validate a specific fields type.
    if ( 'hcaptcha-for-ninja-forms' !== model.get( 'type' ) ) {
    return;
    }

    // Check if the Model has a value.
    if ( model.get( 'value' ) ) {
    // Remove Error from Model.
    Backbone.Radio.channel( 'fields' ).request(
    'remove:error',
    model.get( 'id' ),
    'required-error'
    );
    } else {
    const fieldId = model.get( 'id' );
    const widget = document.querySelector( '.h-captcha[data-fieldId="' + fieldId + '"] iframe' );

    if ( ! widget ) {
    return;
    }

    const widgetId = widget.dataset.hcaptchaWidgetId;
    const hcapResponse = hcaptcha.getResponse( widgetId );
    model.set( 'value', hcapResponse );
    }
    },
    } );

    // Instantiate our custom field's controller, defined above.
    window.hCaptchaFieldController = new HCaptchaFieldController();
    } );

    /* global jQuery */

    ( function( $ ) {
    // noinspection JSCheckFunctionSignatures
    $.ajaxPrefilter( function( options ) {
    const data = options.data ?? '';

    if ( ! ( typeof data === 'string' || data instanceof String ) ) {
    return;
    }

    if ( ! data.startsWith( 'action=nf_ajax_submit' ) ) {
    return;
    }

    const urlParams = new URLSearchParams( data );
    const formId = JSON.parse( urlParams.get( 'formData' ) ).id;
    const $form = $( '#nf-form-' + formId + '-cont' );
    let id = $form.find( '[name="hcaptcha-widget-id"]' ).val();
    id = id ? id : '';
    options.data += '&hcaptcha-widget-id=' + id;
    } );
    }( jQuery ) );

    I have added the fix to the v4.4.0, which will be released next month.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.