'Form validation development'

This commit is contained in:
Burak Civan 2021-05-21 13:56:01 +03:00
parent 7695ce94b5
commit 1840d2aec5
5 changed files with 66 additions and 21 deletions

View File

@ -78,7 +78,28 @@ export default {
flex-flow: row wrap; flex-flow: row wrap;
} }
.form-container .invalid-feedback {
position: absolute;
bottom: -18px;
}
.form-container .has-error {
position: relative;
margin-bottom:unset !important;
}
.form-container .has-error .form-control {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-right:1px solid;
}
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
.form-container .has-error {
position: relative;
margin-bottom:1.5rem !important;
}
.current-tab-btn { .current-tab-btn {
padding: 0 15px; padding: 0 15px;
} }

View File

@ -86,7 +86,7 @@
description: "Input label (text before input)" description: "Input label (text before input)"
}, },
error: { error: {
type: String, type: [String, Object, Array],
description: "Input error (below input)" description: "Input error (below input)"
}, },
footerError: { footerError: {

View File

@ -9,6 +9,8 @@ export default {
select: "", select: "",
enabled: 1 enabled: 1
}, },
error_field: false,
error_field_name: ''
} }
}, },
@ -16,6 +18,9 @@ export default {
addItem() { addItem() {
this.newDatas = true; this.newDatas = true;
this.currentTab = undefined; this.currentTab = undefined;
this.error_field = true;
this.error_field_name = '';
if (this.model) { if (this.model) {
this.model.name = ''; this.model.name = '';
this.model.rate = ''; this.model.rate = '';
@ -26,6 +31,9 @@ export default {
handeClickEdit(item, index) { handeClickEdit(item, index) {
this.newDatas = false; this.newDatas = false;
this.currentTab = index; this.currentTab = index;
this.error_field = true;
this.error_field_name = '';
if (this.model) { if (this.model) {
this.model.name = item.name ? item.name : ''; this.model.name = item.name ? item.name : '';
this.model.rate = item.rate ? item.rate : ''; this.model.rate = item.rate ? item.rate : '';
@ -77,6 +85,7 @@ export default {
}, },
onEditEvent(form_method, form_url, plus_data, form_list, form_id) { onEditEvent(form_method, form_url, plus_data, form_list, form_id) {
let self = this; let self = this;
const formData = new FormData(this.$refs["form"]); const formData = new FormData(this.$refs["form"]);
const data = {}; const data = {};
@ -97,22 +106,28 @@ export default {
data: data, data: data,
}) })
.then(response => { .then(response => {
form_list.forEach(item => { if (form_list.length) {
if (item.id == form_id) { form_list.forEach(item => {
item.name = response.data.data.name; if (item.id == form_id) {
item.code = response.data.data.code; item.name = response.data.data.name;
item.rate = response.data.data.rate; item.code = response.data.data.code;
item.type = plus_data == undefined ? 'normal' : '' item.rate = response.data.data.rate;
} item.type = plus_data == undefined ? 'normal' : ''
}); }
});
}
this.onSuccessEvent(response); this.onSuccessEvent(response);
this.error_field = false;
}, this) }, this)
.catch(error => { .catch(error => {
self.onFailError(error)
this.success = false; this.success = false;
}); });
}, },
onSubmitEvent(form_method, form_url, plus_data, form_list) { onSubmitEvent(form_method, form_url, plus_data, form_list) {
let self = this;
const formData = new FormData(this.$refs["form"]); const formData = new FormData(this.$refs["form"]);
const data = {}; const data = {};
@ -142,10 +157,16 @@ export default {
}); });
this.onSuccessEvent(response); this.onSuccessEvent(response);
this.error_field = false;
}, this) }, this)
.catch(error => { .catch(error => {
self.onFailError(error)
this.success = false; this.success = false;
}); });
}, },
onFailError(error) {
this.error_field_name = error.response.data.errors;
this.error_field = true;
}
}, },
} }

View File

@ -119,16 +119,17 @@
:placeholder="translations.currencies.name" :placeholder="translations.currencies.name"
prepend-icon="fas fa-font" prepend-icon="fas fa-font"
form-classes="col-md-3" form-classes="col-md-3"
:error="error_field_name.name"
v-model="model.name" v-model="model.name"
/> />
<base-input <base-input
:label="translations.currencies.code" :label="translations.currencies.code"
:error="error_field_name.code"
form-classes="col-md-3" form-classes="col-md-3"
> >
<el-select <el-select
name="code" name="code"
v-model="model.select" v-model="model.select"
required="required"
@change="onChangeCode(model.select)" @change="onChangeCode(model.select)"
filterable filterable
> >
@ -156,7 +157,7 @@
:placeholder="translations.currencies.rate" :placeholder="translations.currencies.rate"
prepend-icon="fas fa-percentage" prepend-icon="fas fa-percentage"
form-classes="col-md-3" form-classes="col-md-3"
required="required" :error="error_field_name.rate"
v-model="model.rate" v-model="model.rate"
/> />
<div class="mt-4 col-md-3 current-tab-btn"> <div class="mt-4 col-md-3 current-tab-btn">
@ -185,8 +186,9 @@
:placeholder="translations.currencies.name" :placeholder="translations.currencies.name"
prepend-icon="fas fa-font" prepend-icon="fas fa-font"
v-model="model.name" v-model="model.name"
:error="error_field_name.name"
/> />
<base-input :label="translations.currencies.code"> <base-input :label="translations.currencies.code" :error="error_field_name.code">
<el-select <el-select
name="code" name="code"
v-model="model.select" v-model="model.select"
@ -218,7 +220,7 @@
:placeholder="translations.currencies.rate" :placeholder="translations.currencies.rate"
prepend-icon="fas fa-percentage" prepend-icon="fas fa-percentage"
v-model="model.rate" v-model="model.rate"
required="required" :error="error_field_name.rate"
/> />
<div> <div>
<div class="d-flex"> <div class="d-flex">
@ -305,7 +307,6 @@ export default {
type: [Object, Array], type: [Object, Array],
}, },
}, },
data() { data() {
return { return {
active: 1, active: 1,

View File

@ -110,6 +110,7 @@
:placeholder="translations.taxes.name" :placeholder="translations.taxes.name"
prepend-icon="fas fa-font" prepend-icon="fas fa-font"
form-classes="col-md-4" form-classes="col-md-4"
:error="error_field_name.name"
v-model="model.name" v-model="model.name"
/> />
<base-input <base-input
@ -119,8 +120,8 @@
:placeholder="translations.taxes.rate" :placeholder="translations.taxes.rate"
prepend-icon="fas fa-percentage" prepend-icon="fas fa-percentage"
form-classes="col-md-4" form-classes="col-md-4"
:error="error_field_name.rate"
v-model="model.rate" v-model="model.rate"
rules="required"
/> />
<div class="mt-4 col-md-4 current-tab-btn"> <div class="mt-4 col-md-4 current-tab-btn">
<base-button <base-button
@ -146,6 +147,7 @@
data-name="name" data-name="name"
:placeholder="translations.taxes.name" :placeholder="translations.taxes.name"
prepend-icon="fas fa-font" prepend-icon="fas fa-font"
:error="error_field_name.name"
v-model="model.name" v-model="model.name"
/> />
<base-input <base-input
@ -154,8 +156,8 @@
data-name="rate" data-name="rate"
:placeholder="translations.taxes.rate" :placeholder="translations.taxes.rate"
prepend-icon="fas fa-percentage" prepend-icon="fas fa-percentage"
:error="error_field_name.rate"
v-model="model.rate" v-model="model.rate"
rules="required"
/> />
<div> <div>
<div class="d-flex"> <div class="d-flex">