在国家代码下拉列表中添加所需的验证 [ intl-tel-input jquery plugin ]

Posted 2023-05-09

【中文标题】在国家代码下拉列表中添加所需的验证 [ intl-tel-input jquery plugin ]

【英文标题】：Add required validation on country code drop down [ intl-tel-input jquery plugin ]

【发布时间】：2017-05-26 11:30:24

【问题描述】：

intl-tel-input plugin link

我正在使用这个插件，我想在国家代码下拉列表中添加所需的验证，但是这个插件不允许我这样做。

我试过了，但失败了。

首先我在下拉点击事件中添加选定的类

$(document).on('click', '.country', function () 
    $(".flag-dropdown").find('.selected-flag').addClass('selected');
);

然后我检查了 div 是否没有选择类然后在输入字段容器 div 中添加错误类

但它不起作用

$("input[name='mobile']").keypress(function () 
    var isSelected = $('.flag-dropdown').find('.selected-flag').hasClass('selected');
    if (isSelected == false) 
        $('.has-feedback').removeClass('has-success');
        $('.has-feedback').addClass('has-error'); 
    
);

我也在使用引导验证

      mobile: 
                validators: 
                    stringLength: min: 8, message: " ",
                    notEmpty: message: " ",
                    regexp: regexp: /^\+?[\d-]+$/, message: " "
                
              

任何帮助将不胜感激！

【参考方案1】：

我也使用了这个插件，遇到了同样的问题，通过这些步骤解决了

1 ：将回调函数添加到引导验证

          mobile: 
                    validators: 
                        notEmpty: message: " ",
                        regexp: regexp: /^\+?[\d ]+$/, message: " ",
                        callback: 
                            message: '',
                            callback: function (value, validator, $field) 
                                if(!$('div.flag-dropdown').find('.country').hasClass('active'))
                                    return false;
                                else
                                    return true;
                                
                            
                        ,
                    
                ,

2：通过此代码更改您的点击事件

$(document).on('click', '.country', function () 
    var selectCode = $('ul.country-list').find('.active').attr('data-dial-code');
    if($.type(selectCode ) === "string") 
        $('#contact_mobile').val('+' + selectCode);
    else
        $('#contact_mobile').val('');
    
);

【讨论】：

如何选择？ :)