'Form validation development'
This commit is contained in:
parent
7695ce94b5
commit
1840d2aec5
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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: {
|
||||||
|
37
resources/assets/js/mixins/spa-global.js
vendored
37
resources/assets/js/mixins/spa-global.js
vendored
@ -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;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
@ -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">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user