1

intl-tel-input プラグイン リンク

このプラグインを使用していて、国コードのドロップダウンに必要な検証を追加したいのですが、このプラグインではそれができません。

私はそれを試しましたが失敗しました。

最初に、ドロップダウンクリックイベントで選択したクラスを追加します

$(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: " "}
                }
              }

どんな助けでも大歓迎です.!

4

1 に答える 1

3

私もこのプラグインを使用し、同じ問題で立ち往生し、これらの手順で解決しました

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('');
    }
});
于 2017-01-12T14:43:29.607 に答える