【问题标题】:Add required validation on country code drop down [ intl-tel-input jquery plugin ]在国家代码下拉列表中添加所需的验证 [ 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: " "}
                }
              }

任何帮助将不胜感激!

【问题讨论】:

    标签: javascript jquery plugins intl-tel-input


    【解决方案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('');
        }
    });
    

    【讨论】:

    • 如何选择? :)
    猜你喜欢
    • 2019-12-14
    • 2019-02-16
    • 2020-03-15
    • 2019-09-27
    • 1970-01-01
    • 2017-06-14
    • 2021-08-28
    • 2019-09-10
    • 1970-01-01
    相关资源
    最近更新 更多