重力表格的国际电话代码'phone'字段

Question

我正在尝试使用重力形式"电话"字段实现 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' },
});
}
});

每当出现重力形式验证错误时，下拉列表中都不会选择任何选项。如何解决这个问题？欢迎任何帮助/建议。

Answer 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,
});
}
});
}
});