如何验证任何空输入字段的 vue-form 生成器模式字段

Question

这里我写了一个验证vue-form生成器输入字段的代码。在这里，我为这两个组件编写了两个 vue-generator 表单组件我有两个模式。在该模式中，我想验证每个字段。就像第一个屏幕上的任何字段都是空的一样，下一个按钮不应该启用它应该被禁用，直到所有输入字段都被填充。所以在这里我想验证一个输入字段，如果它是空的，下一步按钮应该禁用。因此，如果有人对此有任何想法，请帮助我。

  <div>
    <vue-form-g
      :schema="schema_third"
      :model="model"
      :options="formOptions"
    ></vue-form-g>
    <span class="prev_next">
      <button class="prev_next_btn" @click="prev()">Previous</button>
      <button class="prev_next_btn" @click="next()">Next</button>
    </span>
  </div>

<div>
<vue-form-g :schema="schema_Antiques" :model="model" :options="formOptions"></vue-form-g>
<span class="prev_next">
<button class="prev_next_btn" @click.prevent="prev()">Previous</button>
<button class="prev_next_btn" @click.prevent="next()">Next</button>
</span>
</div>

vue.js

export default {
  components: {
    "vue-form-g": VueFormGenerator.component,
  },

  data() {
    return {
      step: 1,
      formKey: 1,
      model: {
        job_title: null,
        Experience: null,
        Location: null,
        Industry: null,
        Time: null,
        type: null,
        origin: null,
        Age: null,
        Size: null,
        Maker: null,
        Material: null,
        other_spec: null,
      },
      schema_third: {
        fields: [
          {
            type: "input",
            inputType: "text",
            placeholder: "Job title",
            required: true,
            model: "job_title",
            name: "Job_title",
            styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Experience",
            required: true,
            model: "Experience",
            styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Location",
            required: true,
            model: "Location",
            styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Industry",
            required: true,
            model: "Industry",
            styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Time",
            required: true,
            model: "Time",
            styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"],
            validator: VueFormGenerator.validators.text,
          },
          {
            type: "input",
            inputType: "text",
            placeholder: "Time",
            required: true,
            model: "Time",
            styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"],
            validator: VueFormGenerator.validators.text,
          },
        ],
      },
      
      schema_Antiques: {
            fields: [{
                type: "input",
                inputType: "text",
                placeholder: "Type",
                model: "type",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Origin",
                required: true,
                model: "Origin",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "number",
                placeholder: "Age",
                required: true,
                model: "Age",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Condition",
                required: true,
                model: "Condition",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "number",
                placeholder: "Size",
                required: true,
                model: "Size",
                styleClasses: ["half-width col-xs-12 col-sm-6", "job_title"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Maker",
                required: true,
                model: "Maker",
                styleClasses: ["half-width col-xs-12 col-sm-6", "Experience"]
            }, {
                type: "input",
                inputType: "text",
                placeholder: "Material",
                required: true,
                model: "Material",
                styleClasses: ["half-width col-xs-12 col-sm-4", "job_title"]
            }, {
                type: "textArea",
                model: "other_spec",
                max: 500,
                placeholder: "Other spec:",
                styleClasses: ["half-width col-xs-12 col-sm-3", "Experience"]
            }]
        },
      
      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true,
      },
    };
  },
  delimiters: ["<%", "%>"],
  ready: function () {
    console.log("ready");
  },
  methods: {
    prev() {
      if (this.checkForm()) {
        this.step--;
      }
    },
    next() {
      if (this.checkForm()) {
        this.step++;
      }
    },
    checkForm() {
      let fields = Object.assign([], this.schema_third.fields);
      let errors = [];

      fields.forEach((field, index) => {
        if (field.required && !this.model[field.model]) {
          fields[index].styleClasses.push("error-field");
          errors.push(field.placeholder + " is required");
        } else if (
          this.model[field.model] &&
          fields[index].styleClasses.includes("error-field")
        ) {
          let indexOfErrorClass = fields[index].styleClasses.indexOf(
            "error-field"
          );
          fields[index].styleClasses.splice(indexOfErrorClass, 1);
        }
      });
      this.schema_third.fields = fields;
      return errors.length === 0;
    },

    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) => {
          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);
        });
    },
  },
};
</script>

<style>
.error-field input {
  border: solid thin red;
}
</style>