https://webix.com/assets/js/functions-contactUsForm.js

1/* for Contact Us page */
2
3function eventHandling(module) {
4	//run on jquery ready
5	$(document).ready(function() {
6		if (module.init) {
7			module.init();
8		}
9	});
10	return module;
11}
12
13eventHandling(function(){
14	var elements = {};
15	var errors = {};
16	var email_pattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,6})+$/i;
17
18	var init = function(){
19		elements.email = $('#email_input');
20		elements.name = $('#name_input');
21		elements.message = $('#message_input');
22		elements.agree_check = $('#agree_checkbox');
23		elements.submit_button = $('#formSubmissionSuccess');
24		errors.email = 'Please enter a valid email address';
25		errors.name = 'Please enter your name';
26		errors.message = 'Please enter your message';
27		errors.agree_check = 'Please agree with the terms';
28
29		elements.email.on('input', function(){
30			if(doMatchPattern($(this), email_pattern)){
31				addCheckMark($(this));
32			} else {
33				removeCheckMark($(this));
34			}
35		});
36
37		elements.name.on('input', function(){
38			if(!isEmpty($(this))){
39				addCheckMark($(this));
40			} else {
41				removeCheckMark($(this));
42			}
43		});
44
45		elements.message.on('input', function(){
46			if(!isEmpty($(this))){
47				addCheckMark($(this));
48			} else {
49				removeCheckMark($(this));
50			}
51		});
52
53		elements.email.on('blur', function(){
54			if(!doMatchPattern($(this), email_pattern)){
55				addError($(this), errors.email);
56			}
57		});
58
59		elements.agree_check.on('change', function(){
60			if(!isEmptyCheck($(this))) {
61				addCheckMark($(this));
62			} else {
63				removeCheckMark($(this));
64			}
65		});
66
67		elements.submit_button.on('click', function(){
68			sendMessage();
69			return false;
70		});
71
72	};
73
74	var isEmpty = function(elem){
75		return !elem.val();
76	};
77
78	var isEmptyCheck = function(elem){
79		return !elem.prop('checked');
80	};
81
82	var doMatchPattern = function(elem, pattern){
83		return pattern.test(elem.val());
84	};
85
86	var addError = function(elem, error_text){
87		elem.closest('.js-fieldset').find('.js-error-label').text(error_text);
88		elem.closest( '.js-fieldset' ).addClass('form-fieldset-error');
89	};
90
91	var removeError = function(elem){
92		elem.closest( '.js-fieldset' ).removeClass('form-fieldset-error');
93	};
94
95	var addCheckMark = function(elem){
96		removeError(elem);
97		elem.closest( '.js-fieldset' ).addClass('form-fieldset-filled');
98	};
99
100	var removeCheckMark = function(elem){
101		elem.closest( '.js-fieldset' ).removeClass('form-fieldset-filled');
102	};
103
104	var isEverythingCorrect = function(){
105		if(doMatchPattern(elements.email, email_pattern) && !isEmpty(elements.email) && !isEmpty(elements.name) && !isEmpty(elements.message) && !isEmptyCheck(elements.agree_check)){
106			return true;
107		} else {
108			return false;
109		}
110	};
111
112	var sendMessage = function(){
113		if (!isEverythingCorrect()) {
114			if(isEmpty(elements.email)){
115				addError(elements.email, errors.email);
116			}
117			if(isEmpty(elements.name)){
118				addError(elements.name, errors.name);
119			}
120			if(isEmpty(elements.message)) {
121				addError(elements.message, errors.message);
122			}
123			if(isEmptyCheck(elements.agree_check)) {
124				addError(elements.agree_check, errors.agree_check);
125			}
126		} else {
127			webix.ajax().post("/actions/send_email",{
128				name: elements.name.val(),
129				email: elements.email.val(),
130				message: elements.message.val()
131			}).then(function(){
132				document.location.href= "/thank-you/";
133				elements.email.val('');
134				elements.name.val('');
135				elements.message.val('');
136			});
137		}
138	};
139
140	return {
141		init: init
142	};
143}());