Validation không làm việc với INTL-TEL-input

Question

Tôi đang cố gắng sử dụng Intl-tel-input ... https://github.com/Bluefieldscom/intl-tel-input#utilities-script

Tôi đã bao gồm css ở phía trên cùng của tấm

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

hình thức của tôi ở giữa với "tel" id ... tôi cũng đang sử dụng rau mùi tây để xác nhận các bộ phận của hình thức, và đó là làm việc tốt,

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

và ở dưới cùng của trang của tôi bao gồm các jquery, bootstrap, v.v ... và js intl-tel-input ....

<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> 

Và sau đó tôi khởi tạo các tiện ích ...

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

Yếu tố hình thức nhặt những lá cờ đất nước, vì vậy các plug trong dường như làm việc, nhưng không có xác nhận đang xảy ra. Tệp utils.js là phiên bản "được biên dịch" của tệp, mà tôi tin là phiên bản chính xác để sử dụng - nhưng tôi đã thử cả phiên bản được biên dịch và không được biên dịch.

Tôi đang thiếu gì ở đây? tại sao việc xác thực và định dạng không hoạt động?

cảm ơn.

Answer 1

http://js-tutorial.com/international-telephone-input-711 điều này sẽ hữu ích cho bạn.

Nội dung của liên kết:

1. INCLUDE CSS AND JS FILES 
<link rel="stylesheet" href="build/css/intlTelInput.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="build/js/intlTelInput.min.js"></script> 
2. HTML 
<input type="tel" id="mobile-number"> 
3. JAVASCRIPT 
$("#mobile-number").intlTelInput(); 
4. OPTIONS 
Note: any options that take country codes should be lower case ISO 3166-1 alpha-2 codes 
autoHideDialCode: If there is just a dial code in the input: remove it on blur, and re-add it on focus. This is to prevent just a dial code getting submitted with the form. 
Type: Boolean Default: true 
defaultCountry: Set the default country by it's country code. Otherwise it will just be the first country in the list. 
Type: String Default: "" 
defaultStyling: The position of the selected flag: "inside" or "outside" (relative to the input). 
Type: String Default: "inside" 
dialCodeDelimiter: Choose the delimiter that is inserted after the dial code when the user selects a country from the dropdown. 
Type: String Default: " " 
nationalMode: Don't insert the international dial code when the user selects a country from the dropdown. 
Type: Boolean Default: false 
onlyCountries: Display only the countries you specify. 
Type: Array Default: undefined 
preferredCountries: Specify the countries to appear at the top of the list. 
Type: Array Default: ["us", "gb"] 
validationScript: Enable validation by specifying the URL to the included libphonenumber script. This ~200k script is fetched only when the page has finished loading (to prevent blocking), and is then accessible through the publicisValidNumber function. 
Type: String Default: "" Example: "lib/libphonenumber/build/isValidNumber.js" 
5. METHODS 
destroy: Remove the plugin from the input, and unbind any event listeners 
$("#mobile-number").intlTelInput("destroy"); 
getSelectedCountryData: Get the country data for the currently selected flag 
$("#mobile-number").intlTelInput("getSelectedCountryData"); 
Returns something like this: 
{ 
    name: "Afghanistan (‫افغانستان‬‎)", 
    iso2: "af", 
    dialCode: "93" 
} 
isValidNumber: Validate the current number using Google's libphonenumber (requires the validationScript option to be set correctly). Expects an internationally formatted number. Optionally pass the argument true to accept national numbers as well. 
$("#mobile-number").intlTelInput("isValidNumber"); 
Returns: true/false 
selectCountry: Select a country after initialisation (e.g. when the user is entering their address) 
$("#mobile-number").intlTelInput("selectCountry", "gb"); 
setNumber: Insert a number, and update the selected flag accordingly 
$("#mobile-number").intlTelInput("setNumber", "+44 77333 123 456"); 
6. STATIC METHODS 
getCountryData: Get all of the plugin's country data 
var countryData = $.fn.intlTelInput.getCountryData(); 
Returns an array of country objects: 
[{ 
    name: "Afghanistan (‫افغانستان‬‎)", 
    iso2: "af", 
    dialCode: "93" 
}, ...] 
setCountryData: Set all of the plugin's country data 
$.fn.intlTelInput.setCountryData(countryData); 
7. VALIDATION 
International number validation is hard (it varies by country/district). The only comprehensive solution I have found is Google's libphonenumber, which I have precompiled into a single JavaScript file and included in the lib directory. Unfortunately even after minification it is still ~200kb, so I have included it as an optional extra. If you specify the validationScript option then it will fetch the script only when the page has finished loading (to prevent blocking), and will then be accessible through the public isValidNumber function. 
8. CSS 
Image path: Depending on your project setup, you may need to override the path to flags.png in your CSS. 
.intl-tel-input .flag {background-image: url("path/to/flags.png");} 
Input margin: For the sake of alignment, the default CSS forces the input's vertical margin to 0px. If you want vertical margin, you should add it to the container (with class intl-tel-input). 
Displaying error messages: If your error handling code inserts an error message before the <input> it will break the layout. Instead you must insert it before the container (with class intl-tel-input). 
Share 

Answer 2

tôi có vấn đề với một bài thuyết trình tương tự, ở chỗ nó xuất hiện sẽ nạp module nhưng tôi đã không nhận được xác nhận của các đầu vào.

Tôi đã tìm thấy sự cố của mình là intlTelInput.js chưa được tải đầy đủ khi tôi cố truy cập trường nhập đã sử dụng nó.

Tôi đã thử nghiệm nó bằng cách cho phép trang tải đầy đủ và xác thực đã hoạt động như mong đợi. Bất cứ lúc nào tôi sử dụng một cách nhanh chóng, tuy nhiên, xác nhận đã không làm việc. Hơn nữa, phương thức getNumber cũng sẽ trả về "" ngay cả khi trường nhập có giá trị.

Kiểm tra hai thứ: 1) IntlTelInput.min.js có được nạp đầy đủ khi bạn sử dụng trường không? Nếu không, hãy chậm trễ truy cập vào trường cho đến khi tập lệnh được tải. 2) Đường dẫn cho utilScript có đúng không? Thư viện này là bắt buộc để xác thực.

BTW, khi mã xác thực hoạt động bình thường, nội dung của trường sẽ định dạng theo kiểu của quốc gia bạn đã chọn từ trình đơn 'cờ' thả xuống. Ví dụ, khi tôi chọn "Mỹ" định dạng mặc định của tôi là (202) 555-1212

Answer 3

Đối với xác nhận làm việc bạn cần gọi chức năng xác nhận utils.js Xem bên dưới ví dụ

$("#tel").change(function() 
 
{ 
 
    var telInput = $("#tel"); 
 
    if ($.trim(telInput.val())) 
 
    { 
 
    if (telInput.intlTelInput("isValidNumber")) 
 
    { 
 
     console.log(telInput.intlTelInput("getNumber")); 
 
     alert('Valid'); 
 
    } 
 
    else 
 
    { 
 
     console.log(telInput.intlTelInput("getValidationError")); 
 
     alert('invalid'); 
 
    } 
 
    } 
 
});