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

adding

Browse Source
develop
HerrHase 3 years ago
parent 73338c4e93
commit 38041f7c2b
5 changed files with 251 additions and 52 deletions
Show Stats Download Patch File Download Diff File

199
dist/demo.js vendored
Unescape View File

@ -1,10 +1,10 @@
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/field-error.riot":
/*!******************************!*\
!*** ./src/field-error.riot ***!
\******************************/
/***/ "./src/fieldError.riot":
/*!*****************************!*\
!*** ./src/fieldError.riot ***!
\*****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
@ -176,9 +176,156 @@ __webpack_require__.r(__webpack_exports__);
/***/ }),
/***/ "./src/FormValidator.js":
/***/ "./src/formComponent.riot":
/*!********************************!*\
!*** ./src/formComponent.riot ***!
\********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _formValidator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./formValidator.js */ "./src/formValidator.js");
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
css: null,
exports: {
state:
{
result: undefined
},
onMounted()
{
// creating formValidation
const formValidation = new _formValidator_js__WEBPACK_IMPORTED_MODULE_0__["default"](this.$('.form'), {
'email': {
'presence': true,
'email': true
},
'password': {
'presence': true
}
}, (event, data) => {
event.preventDefault()
this.state.result = JSON.stringify(data)
this.update()
})
}
},
template: (
template,
expressionTypes,
bindingTypes,
getComponent
) => 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>',
[
{
type: bindingTypes.TAG,
getComponent: getComponent,
evaluate: _scope => 'field-error',
slots: [],
attributes: [],
redundantAttribute: 'expr2',
selector: '[expr2]'
},
{
type: bindingTypes.TAG,
getComponent: getComponent,
evaluate: _scope => 'field-error',
slots: [],
attributes: [],
redundantAttribute: 'expr3',
selector: '[expr3]'
},
{
type: bindingTypes.IF,
evaluate: _scope => _scope.state.result,
redundantAttribute: 'expr4',
selector: '[expr4]',
template: template(
'<div class="panel__body"><div expr5="expr5" class="content m-bottom-last-child-0"> </div></div>',
[
{
redundantAttribute: 'expr5',
selector: '[expr5]',
expressions: [
{
type: expressionTypes.TEXT,
childNodeIndex: 0,
evaluate: _scope => [
_scope.state.result
].join(
''
)
}
]
}
]
)
}
]
),
name: 'form-component'
});
/***/ }),
/***/ "./src/demo.js":
/*!*********************!*\
!*** ./src/demo.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js");
/* harmony import */ var _formValidator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./formValidator */ "./src/formValidator.js");
/* harmony import */ var _fieldError_riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fieldError.riot */ "./src/fieldError.riot");
/* harmony import */ var _formComponent_riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./formComponent.riot */ "./src/formComponent.riot");
// register & mount riot component
riot__WEBPACK_IMPORTED_MODULE_3__.register('field-error', _fieldError_riot__WEBPACK_IMPORTED_MODULE_1__["default"]);
riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error'); // creating formValidation
var formValidation = new _formValidator__WEBPACK_IMPORTED_MODULE_0__["default"](document.querySelector('.form-html'), {
'email': {
'presence': true,
'email': true
},
'password': {
'presence': true
}
}, function (event, data) {
event.preventDefault(); // show message and content of data from form
document.querySelector('#result .content').innerHTML = '<p>' + JSON.stringify(data) + '</p>';
document.querySelector('#result').classList.remove('hidden');
});
riot__WEBPACK_IMPORTED_MODULE_3__.register('form-component', _formComponent_riot__WEBPACK_IMPORTED_MODULE_2__["default"]);
riot__WEBPACK_IMPORTED_MODULE_3__.mount('form-component');
/***/ }),
/***/ "./src/formValidator.js":
/*!******************************!*\
!*** ./src/FormValidator.js ***!
!*** ./src/formValidator.js ***!
\******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
@ -214,14 +361,12 @@ var FormValidator = /*#__PURE__*/function () {
* @param {[type]} formSelector [description]
* @param {[type]} constraits [description]
*/
function FormValidator(formSelector, constraits, onSuccess) {
function FormValidator(formElement, constraits, onSuccess) {
var _this = this;
_classCallCheck(this, FormValidator);
// getting selector to find form-element
this.formSelector = formSelector; // constraits for validate.js
// constraits for validate.js
this.constraits = constraits; // adding onSuccess
this._onSuccess = onSuccess; // if form not found
@ -231,7 +376,7 @@ var FormValidator = /*#__PURE__*/function () {
} // get form and elements
this.form = document.querySelector(this.formSelector); // if form not found
this.form = formElement; // if form not found
if (!this.form) {
console.error('FormValidator: form not found!');
@ -344,38 +489,6 @@ var FormValidator = /*#__PURE__*/function () {
/***/ }),
/***/ "./src/demo.js":
/*!*********************!*\
!*** ./src/demo.js ***!
\*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js");
/* harmony import */ var _FormValidator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./FormValidator */ "./src/FormValidator.js");
/* harmony import */ var _field_error_riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./field-error.riot */ "./src/field-error.riot");
riot__WEBPACK_IMPORTED_MODULE_2__.register('field-error', _field_error_riot__WEBPACK_IMPORTED_MODULE_1__["default"]);
riot__WEBPACK_IMPORTED_MODULE_2__.mount('field-error');
var formValidation = new _FormValidator__WEBPACK_IMPORTED_MODULE_0__["default"]('form', {
'email': {
'presence': true,
'email': true
},
'password': {
'presence': true
}
}, function (event, data) {
event.preventDefault();
document.querySelector('#result .content').innerHTML = '<p>' + JSON.stringify(data) + '</p>';
document.querySelector('#result').classList.remove('hidden');
});
/***/ }),
/***/ "./node_modules/form-serialize/index.js":
/*!**********************************************!*\
!*** ./node_modules/form-serialize/index.js ***!

21
dist/index.html vendored
Unescape View File

@ -31,7 +31,12 @@
<div class="container">
<div class="grid">
<div class="col-12">
<form class="form" novalidate method="post">
<h2>
Form
</h2>
<form class="form-html" novalidate method="post">
<div class="field-group">
<label class="field-label">
email
@ -60,6 +65,20 @@
</div>
</div>
</div>
<div class="container">
<div class="grid">
<div class="col-12">
<h2>
Form - Inside a Riot Component
</h2>
<form-component></form-component>
</div>
</div>
</div>
<script type="text/javascript" src="demo.js"></script>
</body>

10
src/demo.js
Unescape View File

@ -1,14 +1,15 @@
import * as riot from 'riot'
import FormValidator from './FormValidator'
import FormValidator from './formValidator'
import FieldError from './fieldError.riot'
import FormComponent from './formComponent.riot'
// register & mount riot component
riot.register('field-error', FieldError)
riot.mount('field-error')
// creating formValidation
const formValidation = new FormValidator('form', {
const formValidation = new FormValidator(document.querySelector('.form-html'), {
'email': {
'presence': true,
'email': true
@ -22,4 +23,7 @@ const formValidation = new FormValidator('form', {
// show message and content of data from form
document.querySelector('#result .content').innerHTML = '<p>' + JSON.stringify(data) + '</p>'
document.querySelector('#result').classList.remove('hidden')
})
})
riot.register('form-component', FormComponent)
riot.mount('form-component')

66
src/formComponent.riot
Unescape View File

@ -0,0 +1,66 @@
<form-component>
<div>
<form class="form" novalidate method="post">
<div class="field-group">
<label class="field-label">
email
<input type="email" class="field-text" name="email" />
</label>
<field-error name="email"></field-error>
</div>
<div class="field-group">
<label class="field-label">
password
<input type="password" class="field-text" name="password" />
</label>
<field-error name="password"></field-error>
</div>
<button class="button" type="submit">
Send
</button>
</form>
<div if={ state.result } class="panel color-text-contrast background-color-success">
<div class="panel__body">
<div class="content m-bottom-last-child-0">
{ state.result }
</div>
</div>
</div>
</div>
<script>
import * as riot from 'riot'
import FormValidator from './formValidator.js'
export default {
state:
{
result: undefined
},
onMounted()
{
// creating formValidation
const formValidation = new FormValidator(this.$('.form'), {
'email': {
'presence': true,
'email': true
},
'password': {
'presence': true
}
}, (event, data) => {
event.preventDefault()
this.state.result = JSON.stringify(data)
this.update()
})
}
}
</script>
</form-component>

7
src/formValidator.js
Unescape View File

@ -17,11 +17,8 @@ class FormValidator
* @param {[type]} formSelector [description]
* @param {[type]} constraits [description]
*/
constructor(formSelector, constraits, onSuccess)
constructor(formElement, constraits, onSuccess)
{
// getting selector to find form-element
this.formSelector = formSelector
// constraits for validate.js
this.constraits = constraits
@ -34,7 +31,7 @@ class FormValidator
}
// get form and elements
this.form = document.querySelector(this.formSelector)
this.form = formElement
// if form not found
if (!this.form) {

Write Preview
Loading…
Cancel
Save