Skip to content

Commit 42058e2

Browse files
author
ahmadalmasri
committed
form
0 parents  commit 42058e2

File tree

146 files changed

+15301
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

146 files changed

+15301
-0
lines changed

‎country.js

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
var countryData = window.intlTelInputGlobals.getCountryData(),
2+
// input = document.querySelector("#phone"),
3+
addressDropdown = document.querySelector("#address-country");
4+
5+
// init plugin
6+
// var iti = window.intlTelInput(input, {
7+
// utilsScript: "../../build/js/utils.js?1562189064761" // just for formatting/placeholders etc
8+
// });
9+
10+
// populate the country dropdown
11+
for (var i = 0; i < countryData.length; i++) {
12+
var country = countryData[i];
13+
var optionNode = document.createElement("option");
14+
optionNode.value = country.iso2;
15+
var textNode = document.createTextNode(country.name);
16+
optionNode.appendChild(textNode);
17+
addressDropdown.appendChild(optionNode);
18+
}
19+
// set it's initial value
20+
addressDropdown.value = iti.getSelectedCountryData().iso2;
21+
22+
// listen to the telephone input for changes
23+
input.addEventListener('countrychange', function(e) {
24+
addressDropdown.value = iti.getSelectedCountryData().iso2;
25+
console.log('countrychange');
26+
27+
});
28+
29+
// listen to the address dropdown for changes
30+
addressDropdown.addEventListener('change', function() {
31+
iti.setCountry(this.value);
32+
console.log('addressDropdown');
33+
34+
});
35+
$( document ).ready(function() {
36+
$('select').not('.disabled').material_select();
37+
$('#address-country').on('change', function(e) {
38+
iti.setCountry(this.value);
39+
console.log('addressDropdown');
40+
});
41+
});

‎globalValiabel.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
let firstName = document.getElementById("firstName");
2+
let lastName = document.getElementById("lastName");
3+
let email = document.getElementById("email");
4+
let submit = document.getElementById("submit");
5+
let password = document.getElementById("password");
6+
let confirmPassowrd = document.getElementById("confirmPassowrd");
7+
let form = document.querySelector("form");
8+
$(document).ready(function() {
9+
$('select').material_select();
10+
});
11+
12+
$('.datepicker').pickadate({
13+
selectMonths: true,
14+
selectYears: 15,
15+
today: 'Today',
16+
clear: 'Clear',
17+
close: 'Ok',
18+
closeOnSelect: false ,
19+
container: undefined,
20+
});
21+
$('.timepicker').pickatime({
22+
default: 'now',
23+
fromnow: 0,
24+
twelvehour: false,
25+
donetext: 'OK',
26+
cleartext: 'Clear',
27+
canceltext: 'Cancel',
28+
container: undefined,
29+
autoclose: false,
30+
ampmclickable: true,
31+
aftershow: function(){}
32+
});
33+
let isValid = {
34+
firstNameIsValid: false,
35+
lastNameIsValid: false,
36+
emailIsValid: false,
37+
passwordIsValid: false,
38+
confirmPassowrdIsvalid: false,
39+
phoneIsValid:false
40+
}

‎index.html

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<!--Import Google Icon Font-->
6+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7+
<!--Import materialize.css-->
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
9+
<!--Let browser know website is optimized for mobile-->
10+
<link rel="stylesheet" href="./node_modules/intl-tel-input/build/css/intlTelInput.min.css">
11+
12+
<link rel="stylesheet" href="style.css">
13+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
14+
<title>Document</title>
15+
</head>
16+
<body>
17+
18+
<div class="register">
19+
20+
<div class="row ">
21+
<div class="col s8 offset-s2">
22+
<div class="row card">
23+
24+
<form id="form" action="" class="form col s12 ">
25+
<div class="row">
26+
<h2 class="title center-align">
27+
Register
28+
</h2>
29+
</div>
30+
<div class="row">
31+
<div class="col s6 input-field">
32+
<i class="material-icons prefix">account_circle</i>
33+
<input type="text" name="" id="firstName" class="validate" >
34+
<label class="active" for="firstName" >first name</label>
35+
</div>
36+
<div class="col s6 input-field">
37+
<i class="material-icons prefix">account_circle</i>
38+
<input type="text" name="" id="lastName" class="validate" >
39+
<label for="lastName" >last name</label>
40+
41+
</div>
42+
43+
</div>
44+
<div class="row">
45+
<div class="input-field col s12">
46+
<i class="material-icons prefix">email</i>
47+
<input id="email" type="email" class="validate">
48+
<label for="email" >Email</label>
49+
50+
</div>
51+
</div>
52+
<div class="row">
53+
<div class="input-field col s12">
54+
<i class="material-icons prefix">remove_red_eye</i>
55+
<input id="password" type="password" data-length="6" class="validate">
56+
<label for="password" >Password</label>
57+
58+
</div>
59+
</div>
60+
61+
<div class="row">
62+
<div class="input-field col s12">
63+
<i class="material-icons prefix">remove_red_eye</i>
64+
<input id="confirmPassowrd" data-length="6" type="password" class="validate">
65+
<label for="password" >Confirm Password</label>
66+
67+
</div>
68+
</div>
69+
<div class="row">
70+
<div class="input-field col s12">
71+
<i class="material-icons prefix">date_range</i>
72+
<input type="text" class="datepicker">
73+
74+
</div>
75+
</div>
76+
<div class="row">
77+
<div class="input-field col s12">
78+
<i class="material-icons prefix">timer</i>
79+
<input type="text" class="timepicker">
80+
81+
</div>
82+
</div>
83+
<div class="row">
84+
<div class="input-field col s12">
85+
<i class="material-icons prefix">location_city</i>
86+
<select id="address-country">
87+
88+
</select>
89+
<label>Materialize Select</label>
90+
</div>
91+
</div>
92+
93+
<div class="row">
94+
<div class=" col s12">
95+
<i class="material-icons prefix">phone</i>
96+
<input id="phone" type="tel" class="validate">
97+
<span id="valid-msg" class="hide">✓ Valid</span>
98+
<span id="error-msg" class="hide"></span>
99+
<label for="phone" >Telephone</label>
100+
101+
</div>
102+
</div>
103+
104+
<div class="row">
105+
<div class="input-field col s12">
106+
107+
<button id="submit" class="btn waves-effect waves-light" type="submit" name="action">Submit
108+
<i class="material-icons right">send</i>
109+
</button>
110+
</div>
111+
</div>
112+
113+
</form>
114+
</div>
115+
</div>
116+
117+
118+
</div>
119+
</div>
120+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
121+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
122+
123+
124+
<script src="/node_modules/intl-tel-input/build/js/intlTelInput.js"></script>
125+
<script>
126+
var input = document.querySelector("#phone");
127+
window.intlTelInput(input, {
128+
// allowDropdown: false,
129+
// autoHideDialCode: false,
130+
// autoPlaceholder: "off",
131+
// dropdownContainer: document.body,
132+
// excludeCountries: ["us"],
133+
// formatOnDisplay: false,
134+
// geoIpLookup: function(callback) {
135+
// $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
136+
// var countryCode = (resp && resp.country) ? resp.country : "";
137+
// callback(countryCode);
138+
// });
139+
// },
140+
// hiddenInput: "full_number",
141+
// initialCountry: "auto",
142+
// localizedCountries: { 'de': 'Deutschland' },
143+
// nationalMode: false,
144+
// onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
145+
// placeholderNumberType: "MOBILE",
146+
// preferredCountries: ['cn', 'jp'],
147+
// separateDialCode: true,
148+
utilsScript: "/node_modules/intl-tel-input/build/js/utils.js",
149+
});
150+
151+
</script>
152+
<script src="globalValiabel.js"></script>
153+
<script src="util.js"></script>
154+
<script src="index.js"></script>
155+
<script src="phoneCheck.js"></script>
156+
<script src="country.js"></script>
157+
</body>
158+
</html>

0 commit comments

Comments
 (0)