tiny-components
/
validator
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases 2 Wiki Activity

change logic, change demo to example

Browse Source
develop
HerrHase 2 years ago
parent 38041f7c2b
commit 092e22ae57
9 changed files with 267 additions and 102 deletions
Show Stats Download Patch File Download Diff File

0
dist/demo.css → example/example.css
Unescape View File

220
dist/demo.js → example/example.js
Unescape View File

@ -191,20 +191,21 @@ __webpack_require__.r(__webpack_exports__);
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
css: null, css: null,
exports: { exports: {
state: state:
{ {
result: undefined result: undefined,
validator: undefined,
class: undefined
}, },
onMounted() onMounted()
{ {
// creating formValidation // creating formValidator
const formValidation = new _formValidator_js__WEBPACK_IMPORTED_MODULE_0__["default"](this.$('.form'), { this.state.validator = new _formValidator_js__WEBPACK_IMPORTED_MODULE_0__["default"](this.$('.form'), {
'email': { 'email': {
'presence': true, 'presence': true,
'email': true 'email': true
@ -212,12 +213,47 @@ __webpack_require__.r(__webpack_exports__);
'password': { 'password': {
'presence': true 'presence': true
} }
}, (event, data) => {
event.preventDefault()
this.state.result = JSON.stringify(data)
this.update()
}) })
// adding on success
this.state.validator.onSuccess((event, data) => {
this.handleSuccess(event, data)
})
// adding on error
this.state.validator.onError((event, errors, data) => {
this.handleError(event, errors, data)
})
},
/**
*
* @param {object} event
* @param {array} data
*
*/
handleSuccess(event, data)
{
event.preventDefault()
this.state.class = 'background-color-success'
this.state.result = JSON.stringify(data)
this.update()
},
/**
*
*
* @param {object} event
* @param {array} errors
* @param {array} data
*
*/
handleError(event, errors, data)
{
this.state.class = 'background-color-danger'
this.state.result = JSON.stringify(errors)
this.update()
} }
}, },
@ -227,16 +263,28 @@ __webpack_require__.r(__webpack_exports__);
bindingTypes, bindingTypes,
getComponent getComponent
) => template( ) => template(
'<div><form class="form" novalidate method="post"><div class="field-group"><label class="field-label">\n email\n <input type="email" class="field-text" name="email"/></label><field-error expr2="expr2" name="email"></field-error></div><div class="field-group"><label class="field-label">\n password\n <input type="password" class="field-text" name="password"/></label><field-error expr3="expr3" name="password"></field-error></div><button class="button" type="submit">\n Send\n </button></form><div expr4="expr4" class="panel color-text-contrast background-color-success"></div></div>', '<div><form expr2="expr2" class="form" novalidate method="post"><div class="field-group"><label class="field-label">\n email\n <input type="email" class="field-text" name="email"/></label><field-error expr3="expr3" name="email"></field-error></div><div class="field-group"><label class="field-label">\n password\n <input type="password" class="field-text" name="password"/></label><field-error expr4="expr4" name="password"></field-error></div><button class="button" type="submit">\n Send\n </button></form><div expr5="expr5"></div></div>',
[ [
{
redundantAttribute: 'expr2',
selector: '[expr2]',
expressions: [
{
type: expressionTypes.EVENT,
name: 'onsubmit',
evaluate: _scope => (event) => ( _scope.state.validator.submit(event) )
}
]
},
{ {
type: bindingTypes.TAG, type: bindingTypes.TAG,
getComponent: getComponent, getComponent: getComponent,
evaluate: _scope => 'field-error', evaluate: _scope => 'field-error',
slots: [], slots: [],
attributes: [], attributes: [],
redundantAttribute: 'expr2', redundantAttribute: 'expr3',
selector: '[expr2]' selector: '[expr3]'
}, },
{ {
type: bindingTypes.TAG, type: bindingTypes.TAG,
@ -244,21 +292,36 @@ __webpack_require__.r(__webpack_exports__);
evaluate: _scope => 'field-error', evaluate: _scope => 'field-error',
slots: [], slots: [],
attributes: [], attributes: [],
redundantAttribute: 'expr3', redundantAttribute: 'expr4',
selector: '[expr3]' selector: '[expr4]'
}, },
{ {
type: bindingTypes.IF, type: bindingTypes.IF,
evaluate: _scope => _scope.state.result, evaluate: _scope => _scope.state.result,
redundantAttribute: 'expr4', redundantAttribute: 'expr5',
selector: '[expr4]', selector: '[expr5]',
template: template( template: template(
'<div class="panel__body"><div expr5="expr5" class="content m-bottom-last-child-0"> </div></div>', '<div class="panel__body"><div expr6="expr6" class="content m-bottom-last-child-0"> </div></div>',
[ [
{ {
redundantAttribute: 'expr5', expressions: [
selector: '[expr5]', {
type: expressionTypes.ATTRIBUTE,
name: 'class',
evaluate: _scope => [
'panel color-text-contrast ',
_scope.state.class
].join(
''
)
}
]
},
{
redundantAttribute: 'expr6',
selector: '[expr6]',
expressions: [ expressions: [
{ {
@ -284,10 +347,10 @@ __webpack_require__.r(__webpack_exports__);
/***/ }), /***/ }),
/***/ "./src/demo.js": /***/ "./src/example.js":
/*!*********************!*\ /*!************************!*\
!*** ./src/demo.js ***! !*** ./src/example.js ***!
\*********************/ \************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict"; "use strict";
@ -312,7 +375,8 @@ var formValidation = new _formValidator__WEBPACK_IMPORTED_MODULE_0__["default"](
'password': { 'password': {
'presence': true 'presence': true
} }
}, function (event, data) { }, true);
formValidation.onSuccess(function (event, data) {
event.preventDefault(); // show message and content of data from form event.preventDefault(); // show message and content of data from form
document.querySelector('#result .content').innerHTML = '<p>' + JSON.stringify(data) + '</p>'; document.querySelector('#result .content').innerHTML = '<p>' + JSON.stringify(data) + '</p>';
@ -351,7 +415,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
* *
* *
* @author HerrHase * @author HerrHase
* @
* *
*/ */
@ -361,47 +424,80 @@ var FormValidator = /*#__PURE__*/function () {
* @param {[type]} formSelector [description] * @param {[type]} formSelector [description]
* @param {[type]} constraits [description] * @param {[type]} constraits [description]
*/ */
function FormValidator(formElement, constraits, onSuccess) { function FormValidator(formElement, constraits) {
var _this = this; var _this = this;
var addSubmitEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
_classCallCheck(this, FormValidator); _classCallCheck(this, FormValidator);
// constraits for validate.js // constraits for validate.js
this.constraits = constraits; // adding onSuccess this.constraits = constraits; // get form and elements
this._onSuccess = onSuccess; // if form not found
if (!this._onSuccess) { this.formElement = formElement; // if form not found
console.error('FormValidator: onSuccess not found!');
} // get form and elements
if (!this.formElement) {
this.form = formElement; // if form not found
if (!this.form) {
console.error('FormValidator: form not found!'); console.error('FormValidator: form not found!');
} }
this.elements = this.form.querySelectorAll('field-error'); // adding submit event this.elements = this.formElement.querySelectorAll('field-error'); // adding event if a element is updated
this.form.addEventListener('submit', function (event) {
_this._onSubmit(event);
}); // adding event if a element is updated
this.form.addEventListener('field-update', function (event) { this.formElement.addEventListener('field-update', function (event) {
_this._onFieldUpdate(event); _this._onFieldUpdate(event);
}); }); // adding submit event
if (addSubmitEvent) {
this.formElement.addEventListener('submit', function (event) {
_this._onSubmit(event);
});
}
} }
/** /**
* handle submit * trigger submit
*
* *
* @param {Event} event * @param {object} event
* *
*/ */
_createClass(FormValidator, [{ _createClass(FormValidator, [{
key: "submit",
value: function submit(event) {
this._onSubmit(event);
}
/**
*
* @param {function} onError
*
*/
}, {
key: "onError",
value: function onError(_onError) {
this._onError = _onError;
}
/**
* settin onSuccess callback and add submit-event on form
*
* @param {function} onSuccess
*
*/
}, {
key: "onSuccess",
value: function onSuccess(_onSuccess) {
// adding onSuccess
this._onSuccess = _onSuccess;
}
/**
* handle submit
*
*
* @param {Event} event
*
*/
}, {
key: "_onSubmit", key: "_onSubmit",
value: function _onSubmit(event) { value: function _onSubmit(event) {
var _this2 = this; var _this2 = this;
@ -413,13 +509,17 @@ var FormValidator = /*#__PURE__*/function () {
var options = { var options = {
fullMessages: false fullMessages: false
}; }; // check form and getting errors
validate_js__WEBPACK_IMPORTED_MODULE_0___default().async(data, this.constraits, options).then( // handling success
function () { validate_js__WEBPACK_IMPORTED_MODULE_0___default().async(data, this.constraits, options).then(function () {
_this2._onSuccess(event, data); _this2._onSuccess(event, data);
}, // handling error }, function (errors) {
function (errors) { event.preventDefault(); // if onError is set, tha
event.preventDefault(); // send each element a event
if (_this2._onError) {
_this2._onError(event, errors, data);
} // send each element a event
_this2.elements.forEach(function (element) { _this2.elements.forEach(function (element) {
var elementErrors = false; // check for errors by name var elementErrors = false; // check for errors by name
@ -759,10 +859,10 @@ module.exports = serialize;
/***/ }), /***/ }),
/***/ "./src/demo.scss": /***/ "./src/example.scss":
/*!***********************!*\ /*!**************************!*\
!*** ./src/demo.scss ***! !*** ./src/example.scss ***!
\***********************/ \**************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict"; "use strict";
@ -4695,8 +4795,8 @@ const __ = {
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched /******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded /******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = { /******/ var installedChunks = {
/******/ "/dist/demo": 0, /******/ "/example/example": 0,
/******/ "dist/demo": 0 /******/ "example/example": 0
/******/ }; /******/ };
/******/ /******/
/******/ // no chunk on demand loading /******/ // no chunk on demand loading
@ -4746,8 +4846,8 @@ const __ = {
/******/ // startup /******/ // startup
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed /******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, ["dist/demo"], () => (__webpack_require__("./src/demo.js"))) /******/ __webpack_require__.O(undefined, ["example/example"], () => (__webpack_require__("./src/example.js")))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["dist/demo"], () => (__webpack_require__("./src/demo.scss"))) /******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["example/example"], () => (__webpack_require__("./src/example.scss")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__); /******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ /******/
/******/ })() /******/ })()

4
dist/index.html → example/index.html
Unescape View File

@ -5,7 +5,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tiny Components | Validator</title> <title>Tiny Components | Validator</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link href="demo.css" rel="stylesheet" type="text/css"> <link href="/example.css" rel="stylesheet" type="text/css">
</head> </head>
<body> <body>
@ -79,7 +79,7 @@
</div> </div>
</div> </div>
<script type="text/javascript" src="demo.js"></script> <script type="text/javascript" src="/example.js"></script>
</body> </body>
</html> </html>

4
mix-manifest.json
Unescape View File

@ -1,4 +1,4 @@
{ {
"/dist/demo.js": "/dist/demo.js", "/example/example.js": "/example/example.js",
"/dist/demo.css": "/dist/demo.css" "/example/example.css": "/example/example.css"
} }

4
src/demo.js → src/example.js
Unescape View File

@ -17,7 +17,9 @@ const formValidation = new FormValidator(document.querySelector('.form-html'), {
'password': { 'password': {
'presence': true 'presence': true
} }
}, (event, data) => { }, true)
formValidation.onSuccess((event, data) => {
event.preventDefault() event.preventDefault()
// show message and content of data from form // show message and content of data from form

0
src/demo.scss → src/example.scss
Unescape View File

58
src/formComponent.riot
Unescape View File

@ -1,6 +1,6 @@
<form-component> <form-component>
<div> <div>
<form class="form" novalidate method="post"> <form class="form" novalidate method="post" onsubmit={ (event) => ( state.validator.submit(event) ) }>
<div class="field-group"> <div class="field-group">
<label class="field-label"> <label class="field-label">
email email
@ -20,7 +20,7 @@
</button> </button>
</form> </form>
<div if={ state.result } class="panel color-text-contrast background-color-success"> <div if={ state.result } class="panel color-text-contrast { state.class }">
<div class="panel__body"> <div class="panel__body">
<div class="content m-bottom-last-child-0"> <div class="content m-bottom-last-child-0">
{ state.result } { state.result }
@ -32,20 +32,21 @@
<script> <script>
import * as riot from 'riot' import * as riot from 'riot'
import FormValidator from './formValidator.js' import FormValidator from './formValidator.js'
export default { export default {
state: state:
{ {
result: undefined result: undefined,
validator: undefined,
class: undefined
}, },
onMounted() onMounted()
{ {
// creating formValidation // creating formValidator
const formValidation = new FormValidator(this.$('.form'), { this.state.validator = new FormValidator(this.$('.form'), {
'email': { 'email': {
'presence': true, 'presence': true,
'email': true 'email': true
@ -53,12 +54,47 @@
'password': { 'password': {
'presence': true 'presence': true
} }
}, (event, data) => {
event.preventDefault()
this.state.result = JSON.stringify(data)
this.update()
}) })
// adding on success
this.state.validator.onSuccess((event, data) => {
this.handleSuccess(event, data)
})
// adding on error
this.state.validator.onError((event, errors, data) => {
this.handleError(event, errors, data)
})
},
/**
*
* @param {object} event
* @param {array} data
*
*/
handleSuccess(event, data)
{
event.preventDefault()
this.state.class = 'background-color-success'
this.state.result = JSON.stringify(data)
this.update()
},
/**
*
*
* @param {object} event
* @param {array} errors
* @param {array} data
*
*/
handleError(event, errors, data)
{
this.state.class = 'background-color-danger'
this.state.result = JSON.stringify(errors)
this.update()
} }
} }

75
src/formValidator.js
Unescape View File

@ -6,7 +6,6 @@ import serialize from 'form-serialize'
* *
* *
* @author HerrHase * @author HerrHase
* @
* *
*/ */
@ -17,38 +16,65 @@ class FormValidator
* @param {[type]} formSelector [description] * @param {[type]} formSelector [description]
* @param {[type]} constraits [description] * @param {[type]} constraits [description]
*/ */
constructor(formElement, constraits, onSuccess) constructor(formElement, constraits, addSubmitEvent = false)
{ {
// constraits for validate.js // constraits for validate.js
this.constraits = constraits this.constraits = constraits
// adding onSuccess
this._onSuccess = onSuccess
// if form not found
if (!this._onSuccess) {
console.error('FormValidator: onSuccess not found!')
}
// get form and elements // get form and elements
this.form = formElement this.formElement = formElement
// if form not found // if form not found
if (!this.form) { if (!this.formElement) {
console.error('FormValidator: form not found!') console.error('FormValidator: form not found!')
} }
this.elements = this.form.querySelectorAll('field-error') this.elements = this.formElement.querySelectorAll('field-error')
// adding submit event
this.form.addEventListener('submit', (event) => {
this._onSubmit(event)
})
// adding event if a element is updated // adding event if a element is updated
this.form.addEventListener('field-update', (event) => { this.formElement.addEventListener('field-update', (event) => {
this._onFieldUpdate(event) this._onFieldUpdate(event)
}) })
// adding submit event
if (addSubmitEvent) {
this.formElement.addEventListener('submit', (event) => {
this._onSubmit(event)
})
}
}
/**
* trigger submit
*
* @param {object} event
*
*/
submit(event)
{
this._onSubmit(event)
}
/**
*
* @param {function} onError
*
*/
onError(onError)
{
this._onError = onError
}
/**
* settin onSuccess callback and add submit-event on form
*
* @param {function} onSuccess
*
*/
onSuccess(onSuccess)
{
// adding onSuccess
this._onSuccess = onSuccess
} }
/** /**
@ -70,18 +96,20 @@ class FormValidator
fullMessages: false fullMessages: false
} }
// check form and getting errors
validate.async(data, this.constraits, options).then( validate.async(data, this.constraits, options).then(
// handling success
() => { () => {
this._onSuccess(event, data) this._onSuccess(event, data)
}, },
// handling error
(errors) => { (errors) => {
event.preventDefault() event.preventDefault()
// if onError is set, tha
if (this._onError) {
this._onError(event, errors, data)
}
// send each element a event // send each element a event
this.elements.forEach((element) => { this.elements.forEach((element) => {
let elementErrors = false let elementErrors = false
@ -93,7 +121,6 @@ class FormValidator
this._dispatchCustomEvent(elementErrors, element) this._dispatchCustomEvent(elementErrors, element)
}) })
} }
) )
} }

4
webpack.mix.js
Unescape View File

@ -26,8 +26,8 @@ mix.webpackConfig({
} }
}) })
mix.js('src/demo.js', 'dist') mix.js('src/example.js', 'example')
.sass('src/demo.scss', 'dist') .sass('src/example.scss', 'example')
.options({ .options({
terser: { terser: {
extractComments: false, extractComments: false,

Write Preview
Loading…
Cancel
Save