Skip to content

Commit fd7b035

Browse files
phuocngphuocng
committed
feat: Get full number example
1 parent 5144502 commit fd7b035

File tree

1 file changed

+118
-0
lines changed

1 file changed

+118
-0
lines changed

‎plugin-international-telephone-input/get-full-number.html

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>FormValidation example - Integrate with the International Telephone Input</title>
5+
<meta charset="utf-8" />
6+
<meta content="width=device-width,initial-scale=1" name="viewport" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
10+
/>
11+
<link
12+
rel="stylesheet"
13+
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"
14+
/>
15+
<link
16+
rel="stylesheet"
17+
href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/css/intlTelInput.css"
18+
/>
19+
<!-- Replace with your path -->
20+
<link rel="stylesheet" href="/vendors/formvalidation/dist/css/formValidation.min.css" />
21+
22+
<style>
23+
/* Display the error message for phone inputs */
24+
.iti--allow-dropdown ~ .invalid-feedback {
25+
display: block;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<div class="container">
31+
<form id="demoForm" method="POST">
32+
<div class="row mb-3">
33+
<label class="col-md-3 col-form-label">Full name</label>
34+
<div class="col-md-5">
35+
<input type="text" class="form-control" name="fullName" />
36+
</div>
37+
</div>
38+
39+
<div class="row mb-3">
40+
<label class="col-md-3 col-form-label">Phone number</label>
41+
<div class="col-md-5">
42+
<input type="text" class="form-control" name="phone" />
43+
</div>
44+
</div>
45+
46+
<div class="row mb-3">
47+
<div class="col-md-9 offset-md-3">
48+
<button type="submit" class="btn btn-primary">Submit</button>
49+
</div>
50+
</div>
51+
</form>
52+
</div>
53+
54+
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/intlTelInput.min.js"></script>
55+
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
56+
57+
<!-- Replace with your path -->
58+
<script src="/vendors/formvalidation/dist/js/FormValidation.min.js"></script>
59+
<script src="/vendors/formvalidation/dist/js/plugins/Bootstrap5.min.js"></script>
60+
<script src="/vendors/formvalidation/dist/js/plugins/InternationalTelephoneInput.min.js"></script>
61+
62+
<script>
63+
document.addEventListener('DOMContentLoaded', function (e) {
64+
const form = document.getElementById('demoForm');
65+
66+
// Create a FormValidation instance
67+
const fv = FormValidation.formValidation(form, {
68+
fields: {
69+
fullName: {
70+
validators: {
71+
notEmpty: {
72+
message: 'The full name is required',
73+
},
74+
},
75+
},
76+
phone: {
77+
validators: {
78+
notEmpty: {
79+
message: 'The phone number is required',
80+
},
81+
},
82+
},
83+
},
84+
plugins: {
85+
trigger: new FormValidation.plugins.Trigger(),
86+
submitButton: new FormValidation.plugins.SubmitButton(),
87+
bootstrap5: new FormValidation.plugins.Bootstrap5(),
88+
icon: new FormValidation.plugins.Icon({
89+
valid: 'fa fa-check',
90+
invalid: 'fa fa-times',
91+
validating: 'fa fa-refresh',
92+
}),
93+
internationalTelephoneInput: new FormValidation.plugins.InternationalTelephoneInput({
94+
field: 'phone',
95+
message: 'The phone number is not valid',
96+
utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.3/js/utils.js',
97+
}),
98+
},
99+
});
100+
101+
fv.on('core.form.valid', function () {
102+
// Get the InternationalTelephoneInput plugin instance
103+
const internationalTelephoneInputPlugin = fv.getPlugin('internationalTelephoneInput');
104+
105+
// Get the intl-tel-input instance
106+
// `phone` is the name of input
107+
const intlTelInstance = internationalTelephoneInputPlugin.intlTelInstances.get('phone');
108+
109+
// Get the phone number including the country code
110+
// See https://github.com/jackocnr/intl-tel-input#public-methods
111+
const phoneNumber = intlTelInstance.getNumber();
112+
113+
console.log(phoneNumber);
114+
});
115+
});
116+
</script>
117+
</body>
118+
</html>

0 commit comments

Comments
 (0)