重力形式“电话”字段的国际电话代码答案

【问题标题】：international phone code for gravity form 'phone' fields重力形式“电话”字段的国际电话代码
【发布时间】：2020-04-21 01:58:10
【问题描述】：

我正在尝试使用重力形式的“电话”字段实现https://www.jqueryscript.net/demo/jQuery-International-Telephone-Input-With-Flags-Dial-Codes/。问题是只要出现验证错误，下拉菜单就会消失。我尝试了以下方法：

        $( '#ModalTrainingForm' ).on( 'shown.bs.modal', () => {
            const input = document.querySelector( '#input_3_5' );
            if ( input ) {
                window.intlTelInput( input, {
                    separateDialCode: true,
                    utilsScript: `../vendor/utils.js?${d}`,
                    autoPlaceholder: 'polite',
                    localizedCountries: { 'sv': 'Sweden' },
                });
            }
        });

随着

       $( document ).on( 'gform_post_render', () => {
            const input = document.querySelector( '#input_3_5' );
            if ( input ) {
                window.intlTelInput( input, {
                    separateDialCode: true,
                    utilsScript: `../vendor/utils.js?${d}`,
                    autoPlaceholder: 'polite',
                    localizedCountries: { 'sv': 'Sweden' },
                });
            }
        });

只要出现重力表单验证错误，下拉菜单中就不会选择任何选项。如何解决这个问题？欢迎任何帮助/建议。

【问题讨论】：

标签： wordpress gravity-forms-plugin

【解决方案1】：

我尝试了以下方法，它现在正在工作。希望这对某人有所帮助。

        let instance = '';

        $( '#ModalTrainingForm' ).on( 'shown.bs.modal', () => { /* my form opens in popup */
            const input = document.querySelector( '#input_3_5' );
            if ( input ) {
                instance = window.intlTelInput( input, {
                    separateDialCode: true,
                    autoPlaceholder: 'polite',
                });
            }
        });

        $( document ).on( 'gform_post_render', ( e, formId ) => {
            if ( 3 === formId ) {
                const input = document.querySelector( '#input_3_5' );/* Phone field */
                if ( 0 !== $( 'div.validation_error' ).length ) {
                    instance.destroy();
                    const countryData = instance.getSelectedCountryData();
                    if ( input ) {
                        instance = window.intlTelInput( input, {
                            separateDialCode: true,
                            autoPlaceholder: 'polite',
                            initialCountry: countryData.iso2,
                        });
                    }
                }

                input.addEventListener( 'countrychange', () => {
                    instance.destroy();
                    const countryData = instance.getSelectedCountryData();
                    if ( input ) {
                        instance = window.intlTelInput( input, {
                            separateDialCode: true,
                            autoPlaceholder: 'polite',
                            initialCountry: countryData.iso2,
                        });
                    }
                });
            }
        });

【讨论】：