xxxxxxxxxx1
<form class="needs-validation" action="" method="post">2
<ul class="stepper horizontal horizontal-fix" id="registrationStepper">3
<li class="step active" id="stprUserAccount">4
<div class="step-title waves-effect waves-dark" data-step-label="Step 1">User Account</div>5
<div class="step-new-content">6
<div class="row">7
<div class="col-12">8
<h4>User Account</h4>9
<div class="row">10
<div class="col-12">11
<!-- Email -->12
<div class="md-form input-with-post-icon">13
<i class="fas fa-envelope prefix badger-red"></i>14
<input type="email" id="tbxEMail" class="form-control" data-val="true" data-val-required="The Username field is required." name="Username" value="">15
<i id="emailErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>16
<i id="emailErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>17
<i id="emailValidationGlyph" class="fas fa-sync-alt input-prefix red-text fa-spin d-none"></i>18
<label for="tbxEMail">E-mail Address*</label>19
<span class="field-validation-valid" data-valmsg-for="Username" data-valmsg-replace="true"></span>20
</div>21
</div>22
</div>23
<div class="row">24
<div class="col-12 col-sm-6">25
<!-- Password -->26
<div class="md-form input-with-post-icon">27
<i class="fas fa-lock prefix badger-red"></i>28
<input type="password" id="materialLoginFormPassword" class="form-control" autocomplete="off" data-val="true" data-val-length="The Password must be at least 14 characters long." data-val-length-max="100" data-val-length-min="14" data-val-regex="Passwords must be at least 8 characters and contain at 3 of 4 of the following: upper case (A-Z), lower case (a-z), number (0-9) and special character (e.g. !@#$%^&*)" data-val-regex-pattern="^((?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])|(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[^a-zA-Z0-9])|(?=.*?[A-Z])(?=.*?[0-9])(?=.*?[^a-zA-Z0-9])|(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^a-zA-Z0-9])).{8,}$" data-val-required="The Password field is required." maxlength="100" name="Password">29
<i id="passwordErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>30
<i id="passwordErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>31
<label for="materialLoginFormPassword">Password*<sup>†</sup></label>32
</div>33
</div>34
<div class="col-12 col-sm-6">35
<!-- Confirm Password -->36
<div class="md-form input-with-post-icon">37
<i class="fas fa-lock prefix badger-red"></i>38
<input type="password" id="materialLoginFormConfirmPassword" class="form-control" autocomplete="off" data-val="true" data-val-equalto="Please make sure your passwords match" data-val-equalto-other="*.Password" data-val-length="The Confirm password must be at least 14 characters long." data-val-length-max="100" data-val-length-min="14" data-val-required="The Confirm password field is required." maxlength="100" name="ConfirmPassword">39
<i id="passwordConfirmErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>40
<i id="passwordConfirmErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>41
<label for="materialLoginFormConfirmPassword">Confirm Password*<sup>†</sup></label>42
</div>43
</div>44
45
</div>46
<div class="row">47
<div class="col-12">48
<p>† – Use 14 or more characters with a mix of letters, numbers and symbols.</p>49
</div>50
</div>51
</div>52
</div>53
<div class="step-actions">54
<button class="waves-effect waves-dark btn btn-lg next-step badger-red-bg white-text" data-feedback="validateUserAccount">CONTINUE <i class="fas fa-arrow-right"></i></button>55
</div>56
</div>57
</li>58
<li class="step step-disabled" id="stprContactInfo">59
<div class="step-title waves-effect waves-dark" id="contactInfoTab" data-step-label="Step 2">Contact Info</div>60
<div class="step-new-content">61
<div class="row">62
<div class="col-12">63
<!-- Step 2 -->64
<h4>Biographical Information</h4>65
<!-- First Name, Preferred First Name, Last Name -->66
<div class="row">67
<div class="col-12 col-sm-4">68
<!-- FirstName -->69
<div class="md-form input-with-post-icon">70
<i class="fas fa-id-badge prefix badger-red"></i>71
<input type="text" id="materialLoginFormFirstName" class="form-control" data-val="true" data-val-required="The FirstName field is required." name="FirstName" value="">72
<label for="materialLoginFormFirstName">First Name*</label>73
</div>74
</div>75
<div class="col-12 col-sm-4">76
<!-- PreferredFirstName -->77
<div class="md-form input-with-post-icon">78
<i class="fas fa-award prefix badger-red"></i>79
<input type="text" id="materialLoginFormPreferredFirstName" class="form-control" name="PreferredFirstName" value="">80
<label for="materialLoginFormPreferredFirstName">Preferred First Name if Different</label>81
</div>82
</div>83
<div class="col-12 col-sm-4">84
<!-- LastName -->85
<div class="md-form input-with-post-icon">86
<i class="fas fa-signature prefix badger-red"></i>87
<input type="text" id="materialLoginFormLastName" class="form-control" data-val="true" data-val-required="The LastName field is required." name="LastName" value="">88
<label for="materialLoginFormLastName">Last Name*</label>89
</div>90
</div>91
</div>92
93
<!-- Birthday, Gender -->94
<div class="row">95
<div class="col-12 col-sm-6">96
<!-- Birthday -->97
<div class="md-form validate">98
<div class="row">99
<div class="col-1">100
<i class="fas fa-birthday-cake prefix badger-red"></i>101
</div>102
<div class="col-11">103
<input placeholder="Select Your Birth Date" type="text" id="materialLoginBirthdate" class="form-control datepicker" data-val="true" data-val-required="The Birthdate field is required." name="Birthdate" value="">104
<label class="label-left-reset" for="materialLoginBirthdate">Your Birth Date*</label>105
</div>106
</div>107
</div>108
</div>109
<div class="col-12 col-sm-6">110
<!-- Gender -->111
<div class="md-form validate input-with-post-icon">112
<div class="row">113
<div class="col-1">114
<i class="fas fa-user prefix badger-red fa-pull-left"></i>115
</div>116
<div class="col-11">117
<select class="mdb-select colorful-select dropdown-danger" id="genderSelect" data-val="true" data-val-required="The Gender field is required." name="Gender">118
<option value="" disabled selected>Select Your Gender</option>119
<option value="man">Man</option>120
<option value="woman">Woman</option>121
<option value="other">Other</option>122
</select>123
<i id="genderErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>124
<i id="genderErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>125
<label class="mdb-main-label" for="genderSelect">Gender*</label>126
</div>127
</div>128
</div>129
</div>130
</div>131
132
<!-- Phone -->133
<div class="row">134
<div class="col-4">135
<div class="md-form">136
<select class="mdb-select colorful-select dropdown-danger" id="countryPhoneSelect" searchable="Find Your Phone's Country..." name="PhoneCountryCode">137
<option value="" disabled selected>Select Phone's Country</option>138
<option value="7e6a8bb4-9bf1-4f9c-9eac-fd127c987669">AF (+93)</option>139
<option value="1018b644-db3f-409f-a12a-c78b6cab7b00">AL (+355)</option>140
<option value="2d29b9bb-e733-4178-afac-ac1c7fccce99">DZ (+213)</option>141
<option value="2958d10a-69e4-42da-bf76-540b56aa56e1">AS (+1-684)</option>142
<option value="3dc7b3fe-30e2-4e35-bff7-8e60ae3cb54c">AD (+376)</option>143
<option value="5a523e08-e213-4466-b725-30961503c236">AO (+244)</option>144
<option value="51645c92-07f6-45f0-923f-3e6ba49177f1">AI (+1-264)</option>145
<option value="625b8f05-9880-4851-8e97-08871cd14208">AQ (+672)</option>146
</select>147
<label class="mdb-main-label" for="countryPhoneSelect">Phone's Country*</label>148
</div>149
</div>150
<div class="col-8">151
<!-- PhoneNumber -->152
<div class="md-form input-with-post-icon">153
<i class="fas fa-phone prefix badger-red"></i>154
<input type="tel" id="materialLoginFormPhoneNumber" class="form-control" data-val="true" data-val-required="The PhoneNumber field is required." name="PhoneNumber" value="">155
<i id="phoneNumberErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>156
<i id="phoneNumberErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>157
<label for="materialLoginFormPhoneNumber">Phone Number*</label>158
</div>159
</div>160
</div>161
</div>162
</div>163
<div class="step-actions">164
<button class="waves-effect waves-dark btn btn-lg next-step badger-red-bg white-text" data-feedback="validateContactInfo">CONTINUE <i class="fas fa-arrow-right"></i></button>165
<button class="waves-effect waves-dark btn btn-lg badger-red bg-white" id="contactInfoBackBtn"><i class="fas fa-arrow-left"></i> BACK</button>166
</div>167
</div>168
</li>169
<li class="step step-disabled" id="stprAddressInfo">170
<div class="step-title waves-effect waves-dark" id="addressInfoTab" data-step-label="Step 3">Address Info</div>171
<div class="step-new-content">172
<div class="row">173
<div class="col-12">174
<!-- Step 2 -->175
<h4>Address</h4>176
<div class="row">177
178
<div class="col-12">179
<!-- Street Address -->180
<div class="md-form input-with-post-icon">181
<i class="fas fa-map-signs prefix badger-red"></i>182
<input type="text" id="materialLoginFormAddress" class="form-control" name="StreetAddress" value="">183
<i id="streetAddressErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>184
<i id="streetAddressErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>185
<label for="materialLoginFormAddress">Street Address</label>186
</div>187
</div>188
</div>189
190
<div class="row">191
<div class="col-12 col-sm-6">192
<!-- Country -->193
<div class="md-form input-with-post-icon">194
<div class="row">195
<div class="col-1">196
<i class="fas fa-flag prefix badger-red"></i>197
</div>198
<div class="col-11">199
<select class="mdb-select colorful-select dropdown-danger" id="countrySelect" searchable="Find Your Country..." name="Country">200
<option value="" disabled selected>Select Your Country</option>201
<option value="7e6a8bb4-9bf1-4f9c-9eac-fd127c987669">Afghanistan</option>202
<option value="1018b644-db3f-409f-a12a-c78b6cab7b00">Albania</option>203
<option value="c3b5a17f-31cd-4152-9145-0aee2480a8c9">Serbia</option>204
<option value="85144cea-d4aa-40da-b0f3-4452397d7b25">Slovakia</option>205
<option value="c305f83c-28a2-4219-8008-9e3bba11a729">Slovenia</option>206
<option value="29d03280-f424-4965-b39b-ca9e1c55fbfa">Ukraine</option>207
<option value="1435e2dd-f053-4c5b-92bd-709b0651022b">United States</option>208
<option value="0e1930a8-fe74-42a5-a237-188e76d6b928">United States Minor Outlying Islands</option>209
<option value="34b350f1-0dd3-4c01-af52-135d80209aa4">Uzbekistan</option>210
211
</select>212
<i id="countryErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>213
<i id="countryErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>214
<label class="mdb-main-label" for="countrySelect">Country*</label>215
</div>216
</div>217
</div>218
</div>219
<div class="col-12 col-sm-6">220
<!-- State -->221
<div class="md-form input-with-post-icon">222
<div class="row">223
<div class="col-1">224
<i class="fas fa-thumbtack prefix badger-red"></i>225
</div>226
<div class="col-11">227
<select class="mdb-select colorful-select dropdown-danger" disabled id="stateProvinceSelect" searchable="Find Your State/Province..." name="State">228
<option value="" disabled selected>Select Your State/Province</option>229
</select>230
<i id="stateErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>231
<i id="stateErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>232
<label for="stateProvinceSelect">State / Province</label>233
</div>234
</div>235
</div>236
</div>237
</div>238
<div class="row">239
<div class="col-12 col-sm-6">240
<!-- City -->241
<div class="md-form input-with-post-icon">242
<div class="row">243
<div class="col-1">244
<i class="fas fa-city prefix badger-red"></i>245
</div>246
<div class="col-11">247
<select class="mdb-select colorful-select dropdown-danger" disabled id="municipalitySelect" searchable="Find Your City..." name="City">248
<option value="" disabled selected>Select Your City</option>249
250
</select>251
<i id="cityErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>252
<i id="cityErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>253
<label for="municipalitySelect">City</label>254
</div>255
</div>256
</div>257
</div>258
<div class="col-12 col-sm-6">259
<!-- ZipCode -->260
<div class="md-form input-with-post-icon">261
<i class="fas fa-mailbox prefix badger-red"></i>262
<input type="text" id="materialLoginFormZipCode" class="form-control" name="ZipCode" value="">263
<i id="zipCodeErrorGreen" class="fas fa-check-circle input-prefix green-text d-none"></i>264
<i id="zipCodeErrorRed" class="fas fa-exclamation-circle input-prefix red-text d-none"></i>265
<label for="materialLoginFormZipCode">Zip Code / Postal Code</label>266
</div>267
</div>268
</div>269
</div>270
</div>271
<div class="step-actions">272
<button class="waves-effect waves-dark btn btn-lg next-step badger-red-bg white-text" data-feedback="validateAddressInfo">SUBMIT REGISTRATION <i class="fas fa-arrow-right"></i></button>273
<button class="waves-effect waves-dark btn btn-lg badger-red bg-white" id="addressInfoBackBtn"><i class="fas fa-arrow-left"></i> BACK</button>274
</div>275
</div>276
</li>277
<li class="step step-disabled" id="stprConfirmation">278
<div class="step-title waves-effect waves-dark" data-step-label="Step 4">Confirmation!</div>279
<div class="step-new-content">280
<div class="row">281
<div class="col-12">282
<!-- Step 2 -->283
<h4>Confirmation!</h4>284
</div>285
</div>286
<div class="step-actions">287
</div>288
</div>289
</li>290
</ul>291
</form>292
293
<script type="text/javascript">294
295
$(document).ready(296
function () {297
298
var registrationStepper = $('#registrationStepper');299
registrationStepper.mdbStepper();300
301
$("#materialLoginFormPhoneNumber").inputmask({302
"showMaskOnHover": false,303
"mask": "(999)999-9999"304
});305
306
var birthdayToday = new Date();307
var maxYear = birthdayToday.getFullYear() - 16;308
var maxDay = birthdayToday.getDate();309
var maxMonth = birthdayToday.getMonth();310
311
$('#materialLoginBirthdate').pickadate({312
format: 'mm/dd/yyyy',313
formatSubmit: 'mm/dd/yyyy',314
firstDay: 0,315
closeOnSelect: false,316
closeOnClear: false,317
editable: true,318
selectYears: 100,319
max: [maxYear, maxMonth, maxDay]320
});321
322
$('.mdb-select').materialSelect({323
validate: true324
});325
326
$('#genderSelect').on('change', e => showGenderOtherTextInput(e));327
328
var contactInfoBackBtn = document.getElementById('contactInfoBackBtn');329
330
contactInfoBackBtn.addEventListener('click', function (event) {331
$('#stprContactInfo').addClass('step-disabled');332
});333
334
var contactInfoTab = document.getElementById('contactInfoTab');335
336
contactInfoTab.addEventListener('click', function (event) {337
$('#stprAddressInfo').addClass('step-disabled');338
});339
340
var addressInfoBackBtn = document.getElementById('addressInfoBackBtn');341
342
addressInfoBackBtn.addEventListener('click', function (event) {343
$('#stprAddressInfo').addClass('step-disabled');344
});345
346
function showGenderOtherTextInput(e)347
{348
if ($('#genderSelect').val() == 'other')349
{350
$('#genderOtherParent').removeClass('d-none');351
}352
else if ($('#genderSelect').val() == '')353
{354
$('#genderSelect').removeClass('valid');355
}356
else357
{358
$('#genderOtherParent').addClass('d-none');359
}360
};361
362
363
var countrySelect = $('#countrySelect');364
countrySelect.materialSelect();365
366
var stateProvinceSelect = $('#stateProvinceSelect');367
var municipalitySelect = $('#municipalitySelect');368
var genderSelect = $('#genderSelect');369
var phoneCountrySelect = $('#phoneCountrySelect');370
371
372
var selectedCountryGUID = null;373
var selectedStateGUID = null;374
var selectedCityGUID = null;375
376
var emailInputTypingTimer;377
var doneTypingInterval = 1500;378
var tbxEMail = $('#tbxEMail');379
var tbxStreet = $('#materialLoginFormAddress');380
381
382
var tbxPassword = $('#materialLoginFormPassword');383
});384
385
386
function validateUserAccount()387
{388
setTimeout(function ()389
{390
$('#stprContactInfo').removeClass('step-disabled');391
392
$('#registrationStepper').nextStep(); // 393
}, 500);394
}395
396
function validateContactInfo()397
{398
setTimeout(function ()399
{400
$('#stprAddressInfo').removeClass('step-disabled');401
402
$('#registrationStepper').nextStep(); // 403
}, 500);404
}405
406
function validateAddressInfo()407
{408
setTimeout(function ()409
{410
$('#stprUserAccount').addClass('step-disabled');411
$('#stprContactInfo').addClass('step-disabled');412
$('#stprAddressInfo').addClass('step-disabled');413
414
$('#stprConfirmation').removeClass('step-disabled');415
416
$('#registrationStepper').nextStep(); // 417
}, 500);418
}419
420
function submitRegistration()421
{422
setTimeout(function ()423
{424
$('#stprUserAccount').addClass('step-disabled');425
$('#stprContactInfo').addClass('step-disabled');426
$('#stprAddressInfo').addClass('step-disabled');427
428
$('#registrationStepper').nextStep(); //429
}, 500);430
}431
432
433
</script>1
1
1
1
Console errors: 0