feature/field-error
Björn 3 years ago
parent 809e15744d
commit b6f0752ac0

@ -16,43 +16,39 @@ npm install tiny-validator --save
## How to use
```javascript
<demo>
<form onsubmit={ (event) => { state.validator.handle(event) }} novalidate>
<div class="field">
<label>
email
<input type="email" name="email" onkeyup={ (event) => { state.validator.handle(event, 'email') }} />
</label>
<field-error errors={ state.validator.errors('email') } ></field-error>
</div>
<div class="field">
<label>
password
<input type="password" name="email" onkeyup={ (event) => { state.validator.handle(event, 'password') }} />
</label>
<field-error errors={ state.validator.errors('password') } ></field-error>
</div>
<button type="submit">Send</button>
</form>
<script>
import Validator from './validator.js'
export default {
onBeforeMount() {
this.state.validator = new Validator({
email: {
presence: true
email: true
},
password: {
presence: true
}
}, this)
}
<form onsubmit={ (event) => { state.validator.handle(event) }} novalidate>
<div class="field">
<label>
email
<input type="email" name="email" onkeyup={ (event) => { state.validator.handle(event, 'email') }} />
</label>
<field-error errors={ state.validator.errors('email') } ></field-error>
</div>
<div class="field">
<label>
password
<input type="password" name="email" onkeyup={ (event) => { state.validator.handle(event, 'password') }} />
</label>
<field-error errors={ state.validator.errors('password') } ></field-error>
</div>
<button type="submit">Send</button>
</form>
<script>
import Validator from './validator.js'
export default {
onBeforeMount() {
this.state.validator = new Validator({
email: {
presence: true
email: true
},
password: {
presence: true
}
}, this)
}
</script>
</demo>
```
![Demo](https://github.com/tentakelfabrik/tiny-validator/blob/master/demo.gif)
}
</script>
```

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

@ -1,3 +1,3 @@
{
"/dist/js/demo.js": "/dist/js/demo.js"
"/demo/demo.js": "/demo/demo.js"
}

32
package-lock.json generated

@ -1,5 +1,5 @@
{
"name": "tiny-validate",
"name": "tiny-validator",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
@ -9339,6 +9339,36 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
"sass": {
"version": "1.32.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.32.0.tgz",
"integrity": "sha512-fhyqEbMIycQA4blrz/C0pYhv2o4x2y6FYYAH0CshBw3DXh5D5wyERgxw0ptdau1orc/GhNrhF7DFN2etyOCEng==",
"dev": true,
"requires": {
"chokidar": ">=2.0.0 <4.0.0"
}
},
"sass-loader": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
"integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
"dev": true,
"requires": {
"clone-deep": "^4.0.1",
"loader-utils": "^1.2.3",
"neo-async": "^2.6.1",
"schema-utils": "^2.6.1",
"semver": "^6.3.0"
},
"dependencies": {
"semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"dev": true
}
}
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

@ -21,6 +21,8 @@
"@riotjs/webpack-loader": "^5.0.0",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.5",
"postcss": "^8.2.1"
"postcss": "^8.2.1",
"sass": "^1.32.0",
"sass-loader": "^8.0.2"
}
}
}

2
src/.gitignore vendored

@ -1,2 +0,0 @@
node_modules
fonts

@ -1,7 +1,7 @@
import * as riot from 'riot'
import Demo from './demo.riot'
import FieldError from './src/field-error.riot'
import FieldError from './../field-error.riot'
riot.register('field-error', FieldError)
riot.mount('field-error')

@ -18,7 +18,7 @@
</form>
<script>
import Validator from './src/validator'
import Validator from './../validator'
export default {
onBeforeMount() {

@ -0,0 +1,6 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*# sourceMappingURL=normalize.min.css.map */
body {
}

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

Loading…
Cancel
Save