|
|
@ -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>
|
|
|
|
```
|
|
|
|
```
|