Trying to Validate a vue-form generator form fields

Question

Here I am using a vue-form generator. I want to validate a form of fields declared as the object of the Vue form generator. In this, while fields are empty form should not navigate to the next step; if any fields are empty, then that field border should become red and not navigate to the next step. I am trying very hard to achieve this but still not do so; if anyone has an idea, please help me.

<div>
    <vue-form-g :schema="schema_third" :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-form generator

Vue.use(VueFormWizard)
new Vue({
 el: '#q-vikreya',

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

    data() {
            return {
            step:1,
            model: {},
        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
        }
            };
    },
<!--/ By using this delimiters we were able to fix the vue.js compatibility with django. since the curly braces between django and-->
<!--    // vue.js conflicted, delimiters helped here to solve the conflicts-->
    delimiters: ["<%","%>"],
        ready: function() {
        console.log('ready');
    },

 methods: {
    prev() {
      if(this.checkForm()) {
        this.step--;
      }
    },
    next() {
      if(this.checkForm()) {
        this.step++;
      }
    },
    checkForm: function (e) {
      if (this.category && this.title) {
        return true;
      }

      this.errors = [];

      if (!this.category) {
        this.errors.push('Name required.');
      }
      if (!this.title) {
        this.errors.push('Age required.');
      }

      e.preventDefault();
    },

      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);

              });

          },
  }
})

What's your error in the console? and did you add your CSS inside the "App.vue" file or any main file? — Riyaz Khan
@Salima, give "important" to the style as maybe your other CSS selector is overwriting, border: solid thin red !important; — Riyaz Khan
Yes I will add Important to css. but one question the solution which you provided me I have added that inside a method thats right . — Shaik Salima

Riyaz Khan Riyaz Khan · Accepted Answer · 2021-03-22T17:06:57

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>

Trying to Validate a vue-form generator form fields

1 Answers