Skip to content

Commit 1654a39

Browse files
SteveWilkesSteveWilkes
committed
Handling basic form validation
1 parent 6ab54d3 commit 1654a39

File tree

3 files changed

+122
-83
lines changed

3 files changed

+122
-83
lines changed

‎assets/js/ao.js

Lines changed: 68 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,19 @@
2626
aoObj._do = doOne;
2727
}
2828

29+
var ao = function (elem) {
30+
return new AoObj(elem);
31+
};
32+
2933
// Instance members
34+
// AoObj
3035
var AoObj = function (elemOrId) {
3136
this._data = {};
3237
if (typeof elemOrId === 'undefined') {
3338
single(this, empty);
3439
}
3540
else if (typeof elemOrId === 'string') {
36-
single(this, Ao.get(elemOrId));
41+
single(this, ao.get(elemOrId));
3742
}
3843
else {
3944
if (isArrayLike(elemOrId)) {
@@ -51,21 +56,6 @@
5156
}
5257
};
5358

54-
var AoPopup = function () {
55-
AoObj.call(this, 'popup');
56-
};
57-
58-
var AoSubmit = function (formAoObj) {
59-
AoObj.call(this, formAoObj.getByCss('input[type="submit"]'));
60-
};
61-
62-
var AoForm = function (form) {
63-
AoObj.call(this, form);
64-
this._cover = new AoObj('progress-cover');
65-
this._popup = new AoPopup();
66-
this.submit = new AoSubmit(this);
67-
};
68-
6959
AoObj.prototype = {
7060
getByCss: function (selector) {
7161
return this.e.querySelector(selector);
@@ -129,6 +119,11 @@
129119
}
130120
};
131121

122+
// AoSubmit
123+
var AoSubmit = function (formAoObj) {
124+
AoObj.call(this, formAoObj.getByCss('input[type="submit"]'));
125+
};
126+
132127
AoSubmit.prototype = Object.create(AoObj.prototype);
133128

134129
AoSubmit.prototype.confirm = function () {
@@ -141,10 +136,15 @@
141136
return false;
142137
};
143138

139+
// AoPopup
140+
var AoPopup = function () {
141+
AoObj.call(this, 'popup');
142+
};
143+
144144
AoPopup.prototype = Object.create(AoObj.prototype);
145145

146146
AoPopup.prototype.show = function (contentId) {
147-
var content = new AoObj(contentId);
147+
var content = ao(contentId);
148148
if (content.getByCss('.message')) {
149149
this.addClass('with-message');
150150
}
@@ -156,15 +156,61 @@
156156
return this.removeClass('with-message');
157157
};
158158

159-
AoForm.prototype = Object.create(AoObj.prototype);
159+
// AoValidator
160+
function required() {
161+
return Boolean(this.e.value);
162+
}
160163

161-
AoForm.prototype.validate = function () {
162-
for (var i = 0, l = this.e.length; i < l; ++i) {
163-
var input = this.e[i];
164+
var AoValidator = function (input) {
165+
AoObj.call(this, input);
166+
this._msg = ao(input.nextElementSibling);
167+
this._validators = [];
168+
var requiredMsg = input.getAttribute('data-val-required');
169+
if (Boolean(requiredMsg)) {
170+
this._validators.push({ test: required, msg: requiredMsg });
171+
}
172+
};
173+
174+
AoValidator.prototype = Object.create(AoObj.prototype);
175+
176+
AoValidator.prototype.validate = function () {
177+
for (var i = 0, l = this._validators.length; i < l; ++i) {
178+
var validator = this._validators[i];
179+
if (validator.test.call(this) === false) {
180+
this._msg.e.innerHTML = validator.msg;
181+
this._msg.removeClass('field-validation-valid').addClass('field-validation-error');
182+
return false;
183+
}
184+
}
185+
this._msg.removeClass('field-validation-error').addClass('field-validation-valid');
186+
return true;
187+
};
188+
189+
// AoForm
190+
var AoForm = function (form) {
191+
AoObj.call(this, form);
192+
this._cover = ao('progress-cover');
193+
this._popup = new AoPopup();
194+
this.submit = new AoSubmit(this);
195+
196+
this._validators = [];
197+
for (var i = 0, l = form.length; i < l; ++i) {
198+
var input = form[i];
164199
if (!Boolean(input.getAttribute('data-val'))) { continue; }
200+
this._validators.push(new AoValidator(input));
201+
}
202+
};
165203

204+
AoForm.prototype = Object.create(AoObj.prototype);
205+
206+
AoForm.prototype.validate = function () {
207+
var result = true;
208+
for (var i = 0, l = this._validators.length; i < l; ++i) {
209+
if (this._validators[i].validate() === false) {
210+
result = false;
211+
}
166212
}
167-
return false;
213+
return result;
168214
};
169215

170216
AoForm.prototype.submitting = function () {
@@ -192,10 +238,6 @@
192238
};
193239

194240
// Static members
195-
var ao = function (elem) {
196-
return new AoObj(elem);
197-
};
198-
199241
ao.ready = function (callback) {
200242
if (document.readyState === 'complete' ||
201243
(document.readyState !== 'loading' && !document.documentElement.doScroll)) {

‎assets/js/contact.js

Lines changed: 53 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,57 @@
1-
(function ($) {
2-
(function (ao) {
3-
(function (web) {
4-
var ContactForm = function () {
5-
function contactForm() {
6-
this.name = ao.get('contact-form-name');
7-
this.email = ao.get('contact-form-email');
8-
this.message = ao.get('contact-form-message');
9-
this.submitButton = ao.get('contact-form-submit');
10-
};
11-
12-
contactForm.prototype.handleSend = function (form) {
13-
var $form = $(form);
14-
var aoForm = ao.form(form);
15-
16-
if (!$form.valid() || !aoForm.submit.confirm()) {
17-
return false;
18-
}
19-
20-
aoForm.submitting();
21-
22-
var formData = {
23-
name: this.name.value,
24-
email: this.email.value,
25-
message: this.message.value
26-
};
27-
28-
//$.ajax({
29-
// type: 'post',
30-
// url: form.action,
31-
// data: formData,
32-
// xhrFields: {
33-
// withCredentials: false
34-
// }
35-
//}).fail(function () {
36-
// ao.form().error();
37-
//}).done(function () {
38-
// ao.form().ok();
39-
//});
40-
1+
(function (ao) {
2+
(function (web) {
3+
var ContactForm = function () {
4+
function contactForm() {
5+
this.name = ao.get('contact-form-name');
6+
this.email = ao.get('contact-form-email');
7+
this.message = ao.get('contact-form-message');
8+
this.submitButton = ao.get('contact-form-submit');
9+
};
10+
11+
contactForm.prototype.handleSend = function (form) {
12+
var aoForm = ao.form(form);
13+
14+
if (!aoForm.validate() || !aoForm.submit.confirm()) {
4115
return false;
42-
};
16+
}
4317

44-
contactForm.prototype.handleSent = function (sent) {
45-
if (sent) {
46-
document.location.href = '/';
47-
return;
48-
}
49-
ao.form().reset();
50-
};
18+
aoForm.submitting();
5119

52-
return contactForm;
53-
}();
20+
var formData = {
21+
name: this.name.value,
22+
email: this.email.value,
23+
message: this.message.value
24+
};
5425

55-
ao.ready(function () {
56-
web.contactForm = new ContactForm();
57-
});
58-
})(Ao.Web || (Ao.Web = {}));
59-
})(Ao);
60-
})(jQuery);
26+
//$.ajax({
27+
// type: 'post',
28+
// url: form.action,
29+
// data: formData,
30+
// xhrFields: {
31+
// withCredentials: false
32+
// }
33+
//}).fail(function () {
34+
// ao.form().error();
35+
//}).done(function () {
36+
// ao.form().ok();
37+
//});
38+
39+
return false;
40+
};
41+
42+
contactForm.prototype.handleSent = function (sent) {
43+
if (sent) {
44+
document.location.href = '/';
45+
return;
46+
}
47+
ao.form().reset();
48+
};
49+
50+
return contactForm;
51+
}();
52+
53+
ao.ready(function () {
54+
web.contactForm = new ContactForm();
55+
});
56+
})(Ao.Web || (Ao.Web = {}));
57+
})(Ao);

‎assets/js/contact.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)