这里我使用了表单的 vue 表单生成器组件。如果用户尝试单击下一步，我想验证这些字段，那么在所有字段都完全填写之前，表单不应进入下一步。所以任何人都请帮助我完成这个要求。直到所有字段都填写表格不应进入下一步 vue 表单生成器组件
<div id="q-vikreya">
<vue-form-g :schema="schema_Real_Estate" :model="model" :options="formOptions"></vue-form-g>
<button class="prev_next_btn" @click.prevent="next()">Next</button>
</div>
new Vue({
el: '#q-vikreya',
components: {
"vue-form-g": VueFormGenerator.component
},
data() {
return {
isHidden: false,
step:1,
category:'',
title:'',
address:'',
city:'',
state:'',
zip:'',
price:'',
description:'',
radio_price:'',
Origin:'',
Stories:'',
picked_b:'',
picked:'',
personal:'',
radio_price:'',
selectedFile:'',
image_1: '',
url: null,
model: {
Basement:'',
Bedrooms:'',
SQFT:'',
Lotsize:'',
TotalRooms:'',
Stories:'',
YearBuilt:'',
HOA:'',
Garages:'',
Roof:'',
Exterior:'',
Cooling:'',
Heating:'',
Elementary_school:'',
Middle_school:'',
High_school:'',
},
schema_Real_Estate: {
fields: [{
type: "input",
inputType: "number",
placeholder: "Bedrooms",
model: "Bedrooms",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Bathrooms",
required: true,
model: "Bathrooms",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "SQFT",
required: true,
min: 18,
model: "SQFT",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Lot size",
required: true,
min: 18,
model: "Lotsize",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Total rooms",
required: true,
min: 18,
model: "TotalRooms",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "Stories",
required: true,
min: 18,
model: "Stories",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Year Built",
required: true,
min: 18,
model: "YearBuilt",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "number",
placeholder: "HOA",
required: true,
min: 18,
model: "HOA",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "number",
placeholder: "Garages",
required: true,
min: 18,
model: "Garages",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Basement",
required: true,
min: 18,
model: "Basement",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Roof",
required: true,
min: 18,
model: "Roof",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Exterior",
required: true,
min: 18,
model: "Exterior",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Cooling",
required: true,
min: 18,
model: "Cooling",
styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Heating",
required: true,
min: 18,
model: "Heating",
styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "Elementary school",
required: true,
min: '',
model: "Elementary_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
}, {
type: "input",
inputType: "text",
placeholder: "Middle school",
required: true,
min: '',
model: "Middle_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "Experience"]
}, {
type: "input",
inputType: "text",
placeholder: "High school",
required: true,
min: '',
model: "High_school",
styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
}]
},
methods: {
prev(currentStep) {
if(this.checkForm()) {
if (currentStep === 4) {
this.step = 3
} else {
this.step--;
}
}
},
next(currentStep) {
if(this.checkForm()) {
if (currentStep === 4) {
this.step = 5
} else {
this.step++;
}
},
<!--This submitForm is the function used for submitting the post Ad form-->
submitForm: function(){
axios({
method : "POST",
url: "{% url 'PostAd' %}", //django path name
headers: {'X-CSRFTOKEN': '{{ csrf_token }}', 'Content-Type': 'application/json'},
data : {"category":this.category, "title":this.title,
"address":this.address,
"city": this.city,
"state": this.state,
"zip": this.zip,
"price": this.price,
"description": this.description,
"radio_price": this.radio_price,
"Job_title": this.model,
},//data
}).then(response => {
localStorage.clear();
console.log("response");
console.log(response.data);
this.success_msg = response.data['msg'];
window.location.replace('{% url "classifieds" %}') // Replace home by the name of your home view
}).catch(err => {
this.err_msg = err.response.data['err'];
console.log("response1");
console.log(err.response.data);
});
},
},
})