main v0.1.0
HerrHase 2 years ago
parent f5635732a3
commit b1f7df8885

@ -13,10 +13,10 @@ For Validation this Component uses [Validate.js](https://validatejs.org/)
npm install @tiny-components/validator --save npm install @tiny-components/validator --save
``` ```
## How to use ## You can use it like this
```javascript ```javascript
<form onsubmit={ (event) => { state.validator.handle(event) }} novalidate> <form class="form" onsubmit={ (event) => ( state.validator.submit(event) ) }>>
<div class="field"> <div class="field">
<label> <label>
email email
@ -38,17 +38,51 @@ npm install @tiny-components/validator --save
import Validator from './validator.js' import Validator from './validator.js'
export default { export default {
state: {
validator: { }
},
onBeforeMount() { onBeforeMount() {
this.state.validator = new Validator({ // creating formValidator
email: { this.state.validator = new FormValidator(this.$('.form'), {
presence: true 'email': {
email: true 'presence': true,
'email': true
}, },
password: { 'password': {
presence: true 'presence': true
} }
}, this) })
// 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> </script>
``` ```
Loading…
Cancel
Save