https://hubcreate.io/static/js/contact.js

1"use strict";
2
3// Class definition
4var HCContactApply = function () {
5	var submitButton;
6	var validator;
7	var form;
8
9	// Init form inputs
10	var initForm = function() {
11		// Team assign. For more info, plase visit the official plugin site: https://select2.org/
12        $(form.querySelector('[name="position"]')).on('change', function() {
13            // Revalidate the field when an option is chosen
14            validator.revalidateField('position');
15        });		
16	}
17
18	// Handle form validation and submittion
19	var handleForm = function() {
20		// Stepper custom navigation
21
22		// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
23		validator = FormValidation.formValidation(
24			form,
25			{
26				fields: {
27					'firstname': {
28						validators: {
29							notEmpty: {
30								message: 'First name is required'
31							}
32						}
33					},
34					'lastname': {
35						validators: {
36							notEmpty: {
37								message: 'Last name is required'
38							}
39						}
40					},
41					'companyname': {
42						validators: {
43							notEmpty: {
44								message: 'Company name is required'
45							}
46						}
47					},
48					'reason': {
49						validators: {
50							notEmpty: {
51								message: 'Reason for contacting is required'
52							}
53						}
54					},
55					'email': {
56            validators: {
57							notEmpty: {
58								message: 'Email address is required'
59							},
60              emailAddress: {
61								message: 'The value is not a valid email address'
62							}
63						}
64					},
65					'message': {
66                        validators: {
67							notEmpty: {
68								message: 'Message is required'
69							}
70						}
71					}		 
72				},
73				plugins: {
74					trigger: new FormValidation.plugins.Trigger(),
75					bootstrap: new FormValidation.plugins.Bootstrap5({
76						rowSelector: '.fv-row',
77                        eleInvalidClass: '',
78                        eleValidClass: ''
79					})
80				}
81			}
82		);
83
84		// Action buttons
85		submitButton.addEventListener('click', function (e) {
86			e.preventDefault();
87
88			// Validate form before submit
89			if (validator) {
90				validator.validate().then(function (status) {
91					console.log('validated!');
92
93					if (status == 'Valid') {
94						console.log('Form validation passed, submitting form...');
95						submitButton.setAttribute('data-kt-indicator', 'on');
96
97						// Disable button to avoid multiple click 
98						submitButton.disabled = true;
99
100						setTimeout(function() {
101							submitButton.removeAttribute('data-kt-indicator');
102
103							// Enable button
104							submitButton.disabled = false;
105							
106							Swal.fire({
107								text: "We got your message!  We'll be in touch with you soon.",
108								icon: "success",
109								buttonsStyling: false,
110								confirmButtonText: "Ok, got it!",
111								customClass: {
112									confirmButton: "btn btn-primary"
113								}
114							}).then(function (result) {
115								if (result.isConfirmed) {
116									form.submit();
117								}
118							});
119
120							form.submit(); // Submit form
121						}, 2000);   						
122					} else {
123						// Scroll top
124
125						// Show error popuo. For more info check the plugin's official documentation: https://sweetalert2.github.io/
126						Swal.fire({
127							text: "Sorry, looks like there are some errors detected, please try again.",
128							icon: "error",
129							buttonsStyling: false,
130							confirmButtonText: "Ok, got it!",
131							customClass: {
132								confirmButton: "btn btn-primary"
133							}
134						}).then(function (result) {
135							KTUtil.scrollTop();
136						});
137					}
138				});
139			}
140		});
141	}
142
143	return {
144		// Public functions
145		init: function () {
146			// Elements
147			form = document.querySelector('#hc_contact_form');
148			submitButton = document.getElementById('hc_contact_submit_button');
149
150			initForm();
151			handleForm();
152		}
153	};
154}();
155
156// On document ready
157KTUtil.onDOMContentLoaded(function () {
158	HCContactApply.init();
159});