update readme

main
HerrHase 4 days ago
parent 56ef1edcfe
commit 31121681ad

@ -1,16 +1,11 @@
# Tiny Components - Validator # Tiny Components - Upload
Created with [Riot.js](https://riot.js.org) Created with [Riot.js](https://riot.js.org)
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](https://validatejs.org/)
## Install ## Install
```bash ```bash
npm install @tiny-components/validator --save npm install @tiny-components/upload --save
``` ```
## You can use it like this ## You can use it like this
@ -20,69 +15,10 @@ npm install @tiny-components/validator --save
<div class="field"> <div class="field">
<label> <label>
email email
<input type="email" name="email" onkeyup={ (event) => { state.validator.handle(event, 'email') }} /> <field-upload name="files"></field-upload>
</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> </label>
<field-error errors={ state.validator.errors('password') } ></field-error> <field-error name="files"></field-error>
</div> </div>
<button type="submit">Send</button> <button type="submit">Send</button>
</form> </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>
``` ```

@ -1,2 +1,2 @@
[install.scopes] [install.scopes]
"@tiny-components" = "https://gitea.node001.net/api/packages/tiny-components/npm/" "@tiny-components" = "https://git.node001.net/api/packages/tiny-components/npm/"

Loading…
Cancel
Save