[Vuejs]-Trying to Validate a vue-form generator form fields

You just have to use your "model" variable and then "schema_third.fields" and loop inside.

Once you loop, you can check if that model key, is set in the "model" object. If not set, then add the class "error-field" in each field’s styleClasses. And do vice versa to remove that class, if the value is set.

Here is the code that you need to add to your checkForm function:

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;
    },

And style class like this:

.error-field input{
  border: solid thin red;
}

Whole Form.vue file:

<template>
  <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>
</template>

<script>
import axios from "axios";
import VueFormGenerator from "vue-form-generator";
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,
      },
      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,
          },
        ],
      },
      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>