标签: intl-tel-input

我有一个表单,我正在将我的手机字段从使用正则表达式更改为intl-tel-input模块.我在检查有效的#时遇到了问题和困惑.

我有一个包含其中几个字段的表单......

<div class="row">
<div class="col-xs-2">
    <label for="cellPhone"
           translate>CONTACT.CELL</label>
</div>
<div class="col-xs-6"
     ng-class="{'has-error': !cellPhoneFocus && forms.contactForm.cellPhone.$invalid && forms.contactForm.cellPhone.$touched }">
    <input type="text" class="form-control intlPhoneInput"
           id="cellPhone" name="cellPhone"
           ng-model="contact.cellPhone.display"
           ng-focus="cellPhoneFocus = true"
           ng-blur="cellPhoneFocus = false; validatePhone($event)">
    <div ng-messages="forms.contactForm.cellPhone.$error"
         ng-show="!cellPhoneFocus && forms.contactForm.cellPhone.$touched"
         class="errorMessages">
        <p ng-message="pattern" translate>
            CRUD.VALID_PHONE</p>
    </div>
</div>

提交......

<button type="submit" class="btn btn-primary" ng-disabled="forms.contactForm.$invalid" id="saveContactLink" translate>CRUD.SAVE</button>

然后在我的控制器(Typescript)...

//In Constructor
$scope.validatePhone = this.validatePhone.bind(this);

//Outside constructor
private validatePhone(eventObject: any) {
    let thePhoneField = $('#' + eventObject.target.id);
    let phoneIsValid = thePhoneField.intlTelInput("isValidNumber");

    this.$scope.forms.contactForm[eventObject.target.id].$invalid = !phoneIsValid;
    this.$scope.forms.contactForm[eventObject.target.id].$error = …

I have using the Nebular ngx-admin template in my angular application. Also using ng2-tel-input for mobile number input. I am having the below HTML code

<div class="form-control-group">
          <label class="label" for="input-mobile">Mobile<span class="text-danger"> *</span></label>
          <input nbInput type="text" id="input-mobile" class="input-mobile" name="mobile" placeholder="Mobile" fullWidth fieldSize="large" formControlName="mobile" inputmode="numeric" digitOnly [status]="status(formcontrols.mobile)"
            ng2TelInput [ng2TelInputOptions]="{initialCountry: 'in'}">
</div>

but after building the Angular application. it looks like the below code. I found it by developer tools in the browser

Issue:

Unable to change the width of the input field …

我一直在尝试输入手机号码的扩展名。所有其他变量都工作正常。扩展变量返回 Null。似乎它正在向 POST 传递一个空值。

<input type="tel" id="mobile" placeholder="Mobile Number" maxlength="10" >

    <script>
        //Initialize the plugin
            $("#mobile").intlTelInput({
                initialCountry: "auto",
                nationalMode: "true",
                utilsScript:'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/8.5.0/js/utils.js',
                geoIpLookup: function(callback) {
                $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
                    var countryCode = (resp && resp.country) ? resp.country : "";
                    callback(countryCode);
                });
            }
            });    

        //Ajax Registration
            $("#register").click(function(){

            var email = $("#email").val();
            var password = $("#password").val();
            var confirmpassword = $("#confirmpassword").val();
            var fname = $("#fname").val();
            var lname = $("#lname").val();
            var mobile = $("#mobile").val();
            var role = $("#role").val();
            var extension = $("#mobile").intlTelInput("getExtension");

            var data …

我正在尝试使用intl-tel-input ... https://github.com/Bluefieldscom/intl-tel-input#utilities-script

我把css包含在表格的顶部

<link rel="stylesheet" href="css/intlTelInput.css">

我的表单中间有"tel"id ...我也使用欧芹来验证表单的部分,这样工作正常,

<input class="form-control input-sm"  id="tel" name="tel" type="tel" data-parsley-required>

在我的页面底部我包括jquery,bootstrap等...和intl-tel-input js ....

 <script src="js/jquery.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/parsley.js"></script>
 <script src="js/intlTelInput.min.js"></script>

然后我初始化实用程序......

$("#tel").intlTelInput({
            utilsScript: "js/utils.js"
});

表单元素选取国家标志,因此插件似乎正在工作,但没有进行验证.utils.js文件是该文件的"已编译"版本,我相信它是正确使用的 - 但我已经尝试了编译和非编译版本.

我在这里失踪了什么？为什么验证和格式化不起作用？

谢谢.

我在 Angular 项目中使用 ngx-intl-tel-input 进行电话号码验证。

<form #f="ngForm" [formGroup]="phoneForm">
<ngx-intl-tel-input 
[cssClass]="'custom'" 
[preferredCountries]="['us', 'gb']" 
[enablePlaceholder]="true"
[enableAutoCountrySelect]="true"
[value]="'+91 8888888888'"
name="phone" 
formControlName="phone"></ngx-intl-tel-input>

我需要为来自服务器的字段设置值。

我已经使用了[value]属性，但它似乎不起作用。

极客!

我们都知道名为国际电话输入的真棒插件,有没有办法将它自己的验证方法绑定intlTelInput("isValidNumber")到jquery验证？

intlTelInput("isValidNumber") 返回真,如果真或假,如果假

下面还有更多细节!:

var handleContactFormValidation = function () {

    var value_form = $('#contact_form');//form i would like to validate where phone field is in!
    var value_error = $('.alert-danger', value_form);
    var value_success = $('.alert-success', value_form);
    value_form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block help-block-error', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "", // validate all fields including form hidden input
        rules: { …

我在我的网站上使用intlTelInput.如何使用括号分隔拨号代码.对于前者 这个插件的默认输出是+ 1202someNumber,我需要(+ 1)202someNum？

我正在尝试通过国家/地区代码获取价值。https://www.jqueryscript.net/form/jQuery-International-Telephone-Input-With-Flags-Dial-Codes.html我正在关注这个。

但我无法实现如何通过国家代码获取值的功能。

假设我的输入元素是这样的。

<input type="phone_number" name="phone_no" value="" placeholder="Phone No" class="input form-control" autocomplete="off">

我确实初始化了插件

(async () => {
  let phoneNumberField = $('input[type=phone_number]');
  let isPhoneNumberFieldExist = phoneNumberField.length;
  if (isPhoneNumberFieldExist) {
    phoneNumberField.intlTelInput({
     
    });
  }
})();

现在，当我提交表格时，我也收到了上述电话号码元素。

console.log(el); //will log the same above element 
console.log(el.value) // will log the number in input box

但我无法通过国家代码获得价值。我尝试使用链接指南中给出的实例变量。也尝试过使用这个

console.log( $(el).intlTelInput().getNumber());

但似乎没有任何作用。任何人都可以帮助我如何通过国家/地区代码获取价值吗？

我使用国家/地区代码插件名称intlTelInput.js \n（这是我的演示页面）\n在国家/地区选择更改时我想清空手机（输入字段）的页面

<div class="demo">\n    <h3>Demo</h3>\n    <div class="iti iti--allow-dropdown">\n        <div class="iti__flag-container">\n            <div class="iti__selected-flag" role="combobox" aria-owns="country-listbox" tabindex="0"\n                title="Algeria (&#8235;\xd8\xa7\xd9\x84\xd8\xac\xd8\xb2\xd8\xa7\xd8\xa6\xd8\xb1&#8236;&lrm;): +213">\n                <div class="iti__flag iti__dz"></div>\n                <div class="iti__arrow"></div>\n            </div>\n        </div><input type="tel" id="phone" class="form-control" autocomplete="off" data-intl-tel-input-id="0"\n            placeholder="0551 23 45 67">\n    </div>\n</div>\n

我试过：

$(".iti__selected-flag").bind(\'change\', function(event) {\n         $(\'#phone\').val(\'\')\n      });\n

\n下面的代码将使电话字段值清空（单击时，但我希望在选择另一个国家/地区项目完成后将其清空）

$(function(){\n      $("#phone").bind(\'change\', function(event) {\n         $(\'#phone\').val(\'\')\n      });\n    })\n

但它不起作用

我正在使用此处提供的intlTelInput的演示代码

我可以使用以下方法获取拨号代码

var intlNumber = $("#phone").intlTelInput("getSelectedCountryData");

但是我无法从#phone文本框中获取完整的号码，即“用户输入的拨号代码+号码”。

谁能帮助我如何使国家/地区列表下拉列表始终与输入字段宽度匹配？

将国家/地区列表下拉菜单设置为 100% 不起作用。它应该具有其祖父母的 100% 宽度。但是，不确定如何实现这一目标。

它可以通过javascScript实现，但我只需要使用CSS来实现。当输入字段宽度改变时，下拉列表和输入字段的宽度应该相同。

这是在线 jsfiddle 演示网址： http://jsfiddle.net/5num12gh/

HTML：

<input type="tel" id="phone">

jQuery：

$("#phone").intlTelInput();

谢谢，

我是 jquery 新手，我试图在表单提交后从SelectedCountryData对象中获取值。intl-tel-input

从文档中getSelectedCountryData返回类似下面的内容，我想从中获取值“93”：

{\n  name: "Afghanistan (\xe2\x80\xab\xd8\xa7\xd9\x81\xd8\xba\xd8\xa7\xd9\x86\xd8\xb3\xd8\xaa\xd8\xa7\xd9\x86\xe2\x80\xac\xe2\x80\x8e)",\n  iso2: "af",\n  dialCode: "93"\n}\n

我可以成功返回电话号码，但当[calling_code] => [object Object]我使用以下命令时，会返回呼叫代码：

$("form").submit(function() {\n     $("#phone-full").val($("#phone").intlTelInput("getNumber")); //this works\n     $("#calling_code").val($("#phone").intlTelInput("getSelectedCountryData")); //this doesn\'t\n});\n

以下是表单输入字段：

<input type="tel" id="phone" value="<?php echo $phone_number ?>">\n<input id="phone-full" type="hidden" name="phone_number">\n<input id="calling_code" type="hidden" name="calling_code">\n