Skip to content

Commit a02e0e8

Browse files
scriptexscriptex
committed
Add dist
1 parent 54b7aba commit a02e0e8

File tree

7 files changed

+1867
-76
lines changed

7 files changed

+1867
-76
lines changed

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["@babel/env", "@babel/stage-2"]
3+
}

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,5 @@ typings/
5757
# dotenv environment variables file
5858
.env
5959

60+
# Misc
61+
.DS_Store

‎demo/index.html‎

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -14,76 +14,7 @@
1414
<button type="submit">Register</button>
1515
</form>
1616

17-
<script>
18-
class html5formValidation {
19-
constructor(element = document.querySelector('form'), settings = {}) {
20-
this.settings = Object.assign(
21-
{},
22-
{
23-
errorElement: 'error',
24-
invalidClass: 'invalid',
25-
submitHandler: null,
26-
validateOnInput: true
27-
},
28-
settings
29-
);
30-
this.form = element;
31-
this.errorDiv = `<div class="${this.settings.errorElement}"></div>`;
32-
33-
this.init();
34-
}
35-
36-
init() {
37-
this.form.noValidate = true;
38-
this.settings.validateOnInput && this.validateAll(this.form);
39-
40-
this.form.onsubmit = event => {
41-
this.validateAll(this.form);
42-
43-
if (!this.form.checkValidity()) {
44-
event.preventDefault();
45-
} else {
46-
if (typeof this.settings.submitHandler === 'function') {
47-
event.preventDefault();
48-
49-
this.settings.submitHandler(this);
50-
}
51-
}
52-
};
53-
}
54-
55-
validateAll(form) {
56-
const requiredFields = form.querySelectorAll('[required]');
57-
58-
for (const field of requiredFields) {
59-
this.validateField(field);
60-
}
61-
}
62-
63-
validateField(field) {
64-
if (
65-
!(
66-
field.nextSibling.classList &&
67-
field.nextSibling.classList.contains(this.settings.errorElement)
68-
)
69-
) {
70-
field.insertAdjacentHTML('afterend', this.errorDiv);
71-
}
72-
73-
field.oninvalid = () => {
74-
field.classList.add(this.settings.invalidClass);
75-
field.nextSibling.textContent = field.validationMessage;
76-
};
77-
78-
field.oninput = () => {
79-
field.nextSibling.textContent = '';
80-
field.classList.remove(this.settings.invalidClass);
81-
field.checkValidity();
82-
};
83-
}
84-
}
85-
86-
</script>
17+
<script src="../dist/index.js"></script>
8718

8819
<script>
8920
new html5formValidation()

‎dist/index.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
"use strict";
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.default = void 0;
7+
8+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
9+
10+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
11+
12+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
13+
14+
var html5formValidation =
15+
/*#__PURE__*/
16+
function () {
17+
function html5formValidation() {
18+
var element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document.querySelector('form');
19+
var settings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
20+
21+
_classCallCheck(this, html5formValidation);
22+
23+
this.settings = Object.assign({}, {
24+
errorElement: 'error',
25+
invalidClass: 'invalid',
26+
submitHandler: null,
27+
validateOnInput: true
28+
}, settings);
29+
this.form = element;
30+
this.errorDiv = "<div class=\"".concat(this.settings.errorElement, "\"></div>");
31+
this.init();
32+
}
33+
34+
_createClass(html5formValidation, [{
35+
key: "init",
36+
value: function init() {
37+
var _this = this;
38+
39+
this.form.noValidate = true;
40+
this.settings.validateOnInput && this.validateAll(this.form);
41+
42+
this.form.onsubmit = function (event) {
43+
_this.validateAll(_this.form);
44+
45+
if (!_this.form.checkValidity()) {
46+
event.preventDefault();
47+
} else {
48+
if (typeof _this.settings.submitHandler === 'function') {
49+
event.preventDefault();
50+
51+
_this.settings.submitHandler(_this);
52+
}
53+
}
54+
};
55+
}
56+
}, {
57+
key: "validateAll",
58+
value: function validateAll(form) {
59+
var requiredFields = form.querySelectorAll('[required]');
60+
var _iteratorNormalCompletion = true;
61+
var _didIteratorError = false;
62+
var _iteratorError = undefined;
63+
64+
try {
65+
for (var _iterator = requiredFields[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
66+
var _field = _step.value;
67+
this.validateField(_field);
68+
}
69+
} catch (err) {
70+
_didIteratorError = true;
71+
_iteratorError = err;
72+
} finally {
73+
try {
74+
if (!_iteratorNormalCompletion && _iterator.return != null) {
75+
_iterator.return();
76+
}
77+
} finally {
78+
if (_didIteratorError) {
79+
throw _iteratorError;
80+
}
81+
}
82+
}
83+
}
84+
}, {
85+
key: "validateField",
86+
value: function validateField(field) {
87+
var _this2 = this;
88+
89+
if (!(field.nextSibling.classList && field.nextSibling.classList.contains(this.settings.errorElement))) {
90+
field.insertAdjacentHTML('afterend', this.errorDiv);
91+
}
92+
93+
field.oninvalid = function () {
94+
field.classList.add(_this2.settings.invalidClass);
95+
field.nextSibling.textContent = field.validationMessage;
96+
};
97+
98+
field.oninput = function () {
99+
field.nextSibling.textContent = '';
100+
field.classList.remove(_this2.settings.invalidClass);
101+
field.checkValidity();
102+
};
103+
}
104+
}]);
105+
106+
return html5formValidation;
107+
}();
108+
109+
exports.default = html5formValidation;

‎package.json‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
11
{
22
"name": "html5-form-validator",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
44
"description": "The most simple HTML5 form validator",
5-
"main": "index.js",
5+
"main": "dist/index.js",
6+
"scripts": {
7+
"build": "babel src -d dist"
8+
},
69
"repository": {
710
"type": "git",
811
"url": "git+https://github.com/scriptex/html5-form-validator.git"
912
},
10-
"keywords": ["HTML5", "form", "validator"],
11-
"author":
12-
"Atanas Atanasov <[email protected]> (https://github.com/scriptex)",
13+
"keywords": [
14+
"HTML5",
15+
"form",
16+
"validator"
17+
],
18+
"author": "Atanas Atanasov <[email protected]> (https://github.com/scriptex)",
1319
"license": "MIT",
1420
"bugs": {
1521
"url": "https://github.com/scriptex/html5-form-validator/issues"
1622
},
17-
"homepage": "https://github.com/scriptex/html5-form-validator#readme"
23+
"homepage": "https://github.com/scriptex/html5-form-validator#readme",
24+
"devDependencies": {
25+
"@babel/cli": "^7.0.0-beta.42",
26+
"@babel/core": "^7.0.0-beta.42",
27+
"@babel/preset-env": "^7.0.0-beta.42",
28+
"@babel/preset-stage-2": "^7.0.0-beta.42"
29+
}
1830
}

‎index.js‎ renamed to ‎src/index.js‎

File renamed without changes.

0 commit comments

Comments
 (0)