Skip to content

Commit 3565a4f

Browse files
JorchCortezJorchCortez
committed
[Script updates] Added elipsis.css and updated formcheck.js
Elipsis.css will give a super small visual update allowing the user to set a text to a max of 1,2 or 3 lines. Updated the formcheck script to use classes so the script is better optimized and we can encapsulate the functionalities or trigger them if needed. also added a clear form function that can be triggered through the class or throguh a button if added according to the documentation.
1 parent 85c0490 commit 3565a4f

2 files changed

Lines changed: 123 additions & 56 deletions

File tree

‎Dist/Functional/Elipsis.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
[wt-elipsis-element="single"] {
2+
display: -webkit-box;
3+
-webkit-line-clamp: 1;
4+
-webkit-box-orient: vertical;
5+
overflow: hidden;
6+
text-overflow: ellipsis;
7+
}
8+
9+
[wt-elipsis-element="double"] {
10+
display: -webkit-box;
11+
-webkit-line-clamp: 2;
12+
-webkit-box-orient: vertical;
13+
overflow: hidden;
14+
text-overflow: ellipsis;
15+
}
16+
17+
[wt-elipsis-element="triple"] {
18+
display: -webkit-box;
19+
-webkit-line-clamp: 3;
20+
-webkit-box-orient: vertical;
21+
overflow: hidden;
22+
text-overflow: ellipsis;
23+
}

‎Dist/Functional/FormCheck.js‎

Lines changed: 100 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,112 @@
11
'use strict'
22

3-
const InitializeFormCheck = () => {
4-
let pattern = /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/g;
5-
var checkForms = document.querySelectorAll('[wt-formcheck-element="form"]');
6-
if (!checkForms || checkForms.length === 0) return;
7-
for (var form of checkForms) {
8-
var errorClass = form.getAttribute("wt-formcheck-class");
9-
var submitMessage = form.getAttribute("wt-formcheck-message");
10-
var requiredFields = form.querySelectorAll('[wt-formcheck-type="required"]');
11-
var errorElements = form.querySelectorAll('[wt-formcheck-type="error"]');
12-
var submitButton = form.querySelector('[wt-formcheck-type="submit"]');
13-
var requiredFieldsAndCheckboxes = form.querySelectorAll('[wt-formcheck-type="required"], [type="checkbox"]');
14-
var formErrors = false;
15-
16-
for (let element of errorElements) {
3+
class FormCheck {
4+
constructor(form) {
5+
this.form = form;
6+
this.pattern = /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/g;
7+
this.errorClass = form.getAttribute("wt-formcheck-class");
8+
this.submitMessage = form.getAttribute("wt-formcheck-message");
9+
this.requiredFields = form.querySelectorAll('[wt-formcheck-type="required"]');
10+
this.errorElements = form.querySelectorAll('[wt-formcheck-type="error"]');
11+
this.submitButton = form.querySelector('[wt-formcheck-type="submit"]');
12+
this.defaultSubmitText = this.submitButton.textContent;
13+
this.resetButton = form.querySelector('[wt-formcheck-element="reset"]');
14+
this.requiredFieldsAndCheckboxes = form.querySelectorAll('[wt-formcheck-type="required"], [type="checkbox"]');
15+
this.formErrors = false;
16+
17+
this.init();
18+
}
19+
20+
init() {
21+
for (let element of this.errorElements) {
1722
element.style.display = 'none';
1823
}
1924

20-
for (var field of requiredFields) {
21-
field.classList.remove(`${errorClass}`);
22-
};
25+
for (let field of this.requiredFields) {
26+
field.classList.remove(`${this.errorClass}`);
27+
}
28+
29+
for (let field of this.requiredFieldsAndCheckboxes) {
30+
field.addEventListener('keypress', (e) => this.clearError(e));
31+
field.addEventListener('blur', (e) => this.clearError(e));
32+
}
33+
34+
this.submitButton.addEventListener('click', (e) => this.validateAndSubmit(e));
2335

24-
let fieldError = (field) => {
25-
field.parentNode.querySelector('[wt-formcheck-type="error"]').style.display = 'block';
26-
field.classList.add(`${errorClass}`);
27-
formErrors = true;
36+
if (this.resetButton) {
37+
this.resetButton.addEventListener('click', (e) => this.clearForm(e));
2838
}
39+
}
40+
41+
clearError(e) {
42+
const target = e.target;
43+
if (this.errorClass) target.classList.remove(`${this.errorClass}`);
44+
const errorElement = target.parentNode.querySelector('[wt-formcheck-type="error"]');
45+
if (errorElement) {
46+
errorElement.style.display = 'none';
47+
}
48+
this.formErrors = false;
49+
}
50+
51+
fieldError(field) {
52+
const errorElement = field.parentNode.querySelector('[wt-formcheck-type="error"]');
53+
if (errorElement) {
54+
errorElement.style.display = 'block';
55+
}
56+
field.classList.add(`${this.errorClass}`);
57+
this.formErrors = true;
58+
}
59+
60+
validateAndSubmit(e) {
61+
this.formErrors = false;
2962

30-
for (var field of requiredFieldsAndCheckboxes) {
31-
field.addEventListener('keypress', (e) => {
32-
if (errorClass) e.target.classList.remove(`${errorClass}`);
33-
e.target.parentNode.querySelector('[wt-formcheck-type="error"]').style.display = 'none';
34-
formErrors = false;
35-
});
36-
37-
field.addEventListener('blur', (e) => {
38-
if (errorClass) e.target.classList.remove(`${errorClass}`);
39-
e.target.parentNode.querySelector('[wt-formcheck-type="error"]').style.display = 'none';
40-
formErrors = false;
41-
});
42-
};
43-
44-
submitButton.addEventListener('click', () => {
45-
formErrors = false;
46-
for (let field of requiredFields) {
47-
if (field.getAttribute('type') === 'checkbox' && !field.checked) {
48-
fieldError(field.nextElementSibling);
49-
} else if (field.value.trim() === '') {
50-
fieldError(field);
51-
} else if (field.getAttribute('type') === 'email' && (field.value.indexOf('@') === -1 || field.value.indexOf('.') === -1)) {
52-
fieldError(field);
53-
} else if (field.getAttribute('type') === 'number' && field.value.trim() === '' && !isNaN(field.value.trim())) {
54-
fieldError(field);
55-
} else if (field.getAttribute('type') === 'tel' && !field.value.match(pattern)) {
56-
fieldError(field);
57-
}
58-
};
59-
60-
if (!formErrors) {
61-
submitButton.textContent = `${submitMessage}`;
62-
form.submit();
63+
for (let field of this.requiredFields) {
64+
const fieldType = field.getAttribute('type');
65+
const fieldValue = field.value.trim();
66+
67+
if (fieldType === 'checkbox' && !field.checked) {
68+
this.fieldError(field);
69+
} else if (fieldValue === '') {
70+
this.fieldError(field);
71+
} else if (fieldType === 'email' && (!this.isValidEmail(fieldValue))) {
72+
this.fieldError(field);
73+
} else if (fieldType === 'number' && (fieldValue === '' || isNaN(fieldValue))) {
74+
this.fieldError(field);
75+
} else if (fieldType === 'tel' && !field.value.match(this.pattern)) {
76+
this.fieldError(field);
6377
}
64-
});
78+
}
79+
80+
if (this.formErrors) {
81+
e.preventDefault();
82+
} else {
83+
this.submitButton.textContent = `${this.submitMessage}`;
84+
this.form.submit();
85+
}
86+
}
87+
88+
isValidEmail(email) {
89+
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
90+
return emailPattern.test(email);
91+
}
92+
93+
clearForm(e) {
94+
e.preventDefault();
95+
for (let element of this.errorElements) {
96+
element.style.display = 'none';
97+
}
98+
99+
for (let field of this.requiredFields) {
100+
field.classList.remove(`${this.errorClass}`);
101+
}
102+
103+
this.form.reset();
104+
105+
this.submitButton.textContent = `${this.defaultSubmitText}`;
65106
}
66107
}
67108

68-
document.addEventListener("DOMContentLoaded", InitializeFormCheck);
109+
document.addEventListener('DOMContentLoaded', () => {
110+
const forms = document.querySelectorAll('[wt-formcheck-element="form"]');
111+
forms.forEach(form => new FormCheck(form));
112+
});

0 commit comments

Comments
 (0)