hand validation errors
a simple library for handing back-end errors with front-end worked with angular,react and vuejs and native js
for exemple if you have a api you want sending data by httpClient you have to validate data in back-end and you have using framework like laravel if not valide will return a json errors something like
you have to hand this errors in check if filed hasErrors or not and return errors if field hasErrors
{
message:'invalid data',
errors :{
firstName:['error 1','error 2'],
lastName:['error 1','error 2'],
}
}
Install
`npm install handerrors --save-dev`
or use cdn
<script src="https://unpkg.com/handerrors"></script>
methods api
- handErrors(errors={}) // helpers return a object HandErrors
- setErrors(errors) // set new errors to prop errors setErrors({firstName:['error 1','error 2']})
- hasErrors(field) // return true if giving field is has errors hasErrors('firstName')
- getErrors(field) // return array|string of field if exist else null
- error(field) // return object with HasError/getErrors
- controls // get field with errors exemple controls.firstName.errors/ controls.firstName.hasErrors // controls.firstName.remove();
How works ??
import handErrors from 'handerrors';
...
let erros = handErrors();
errors.setErrors(
{
message:'invalid data',
errors :{
firstName:['error 1','error 2'],
lastName:['error 1','error 2'],
}
}
);
if(errors.controls.someField.hasErrors){
// field has errors
console.log(errors.controls.someField.errors)
} else {
// not errors
}
Exemple with vuejs / laravel
<template>
<div class="form-group">
<label for="first_name">First Name</label>
<input
v-model="formdData.model.first_name"
@blur="contorls.first_name.remove()"
:class="{'is-invalid':contorls.first_name.hasErrors}"
type="text"
class="form-control"
id="first_name"
placeholder="Last Name"
/>
<div v-if="contorls.first_name.hasErrors" class="error">
<p v-for="msg in contorls.first_name.errors" :key="msg">{{msg}}</p>
</div>
</div>
<div class="form-group">
<label for="last_name">Last Name</label>
<input
v-model="formdData.model.last_name"
@blur="contorls.last_name.remove()"
:class="{'is-invalid':contorls.last_name.hasErrors}"
type="text"
class="form-control"
id="last_name"
placeholder="Last Name"
/>
<div v-if="contorls.last_name.hasErrors" class="error">
<p v-for="msg in contorls.last_name.errors" :key="msg">{{msg}}</p>
</div>
</div>
<div class="form-group">
<label for="username">=UserName</label>
<input
v-model="formdData.model.username"
:class="{'is-invalid':contorls.username.hasErrors}"
@blur="contorls.username.remove()"
type="text"
class="form-control"
id="username"
placeholder="UserName"
/>
<div v-if="contorls.username.hasErrors" class="error">
<p v-for="msg in contorls.username.errors" :key="msg">{{msg}}</p>
</div>
</div>
<div>
<div class="form-group">
<label for="password">=password</label>
<input
v-model="formdData.model.password"
:class="{'is-invalid':contorls.password.hasErrors}"
@blur="contorls.password.remove()"
type="text"
class="form-control"
id="password"
placeholder="password"
/>
<div v-if="contorls.password.hasErrors" class="error">
<p v-for="msg in contorls.password.errors" :key="msg">{{msg}}</p>
</div>
</div>
<div>
<button @click="createUser()" type="button" class="btn btn-primary">
<div v-if="formData.submited" class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<span v-else>Register</span>
</button>
</template>
<script>
import handErrors from 'handerrors'
import axios from 'axios';
export default {
mounted() {
this.init();
},
data: () => {
return {
formData: {
model: {
username: "",
first_name: "",
last_name: "",
password: ""
},
errors: {},
submited: false,
}
};
},
methods: {
createUser() {
this.formData.submited = true;
axios.post('endpoint').then(
res => {
this.formData.submited = false;
aler("ok");
},
err => {
this.formData.submited = false;
this.formData.errors = handErrors(err.body.errors);
}
);
},
controls(){
return this.formData.errors;
},
};
</script>
Top comments (0)