@tiny-components/validator (0.2.0)
Published 3 weeks ago by HerrHase
Installation
@tiny-components:registry=https://git.node001.net/api/packages/tiny-components/npm/npm install @tiny-components/validator@0.2.0"@tiny-components/validator": "0.2.0"About this package
Tiny Components - Validator
Created with Riot.js
Validate Form or a Single Form-Field, Error Messages can be show just in time
or after Submit entire Form.
For Validation this Component uses Validate.js
Install
npm install @tiny-components/validator --save
You can use it like this
<form class="form" onsubmit={ (event) => ( state.validator.submit(event) ) }>>
<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 {
state: {
validator: { }
},
onBeforeMount() {
// creating formValidator
this.state.validator = new FormValidator(this.$('.form'), {
'email': {
'presence': true,
'email': true
},
'password': {
'presence': true
}
})
// 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)
})
},
/**
*
*/
handleSuccess(event, data)
{
event.preventDefault()
this.update()
},
/**
*
*/
handleError(event, errors, data)
{
this.update()
}
}
</script>
Dependencies
Dependencies
| ID | Version |
|---|---|
| @tiny-components/plain-ui | ^0.6.0 |
| form-serialize | ^0.7.2 |
| riot | ^9.1.4 |
| validate.js | ^0.13.1 |
Development Dependencies
| ID | Version |
|---|---|
| @riotjs/compiler | ^9.0.7 |
| @riotjs/webpack-loader | ^9.0.1 |
| @tiny-components/webpack | ^0.2.0 |