What is the best approach to create a form wizard with validation using Vue.js?

Question

What is the best approach to create a form wizard with validation using Vue.js?

I recently completed a Vue.Js project where I created a wizard based on a video tutorial. However, I am facing issues with form validation using the 'is-valid' and 'is-invalid' CSS classes that I have defined. Here is my code:

<div class="modal-content tx-14">
              // Code for tabs and steps
           </div>

Javascript

    <script>
   new Vue({
       el: "#page",
       delimiters: ['[[', ']]'],
         data (){
            return {
               rules: {
                  project_url: {
                     pattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
                     string: ''
                  },
                  project_name: {
                     pattern: /^(?!\s*$).+/,
                     string: ''
                  }
               },
               current_step: 1,
               max_step: 1
            }
        },
        methods:{
            // Validation logic here
        }
    })
</script>

Looking for assistance to clean up my code and implement form validation properly.

javascript vue.js

Answer 1

Answer №1

The fundamental concept here is to focus on validating the data within a form, rather than the form itself.

Some may argue that "they are the same" or "it's a subtle distinction," but there is indeed a difference.

Instead of manipulating the form UI directly with jQuery, it is recommended to store form data in the data option of Vue and only display validation results.

Vue.component('InputField', {
  props: ['error', 'value'],
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("update:value", val)
      }
    },
  },
  template: `
    <div
      class="input-field-wrapper"
      :class="{ error: error }"
    >
      <label>
        INPUT: 
        <input
          type="text"
          placeholder="Type in something"
          v-model="inputValue"
        />
        <span v-if="error">this field is required!</span>
      </label>
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      form: [],
      canSubmit: false,
    }
  },
  methods: {
    handleAddInput(id) {
      this.form.push({
        id,
        error: null,
        value: null,
      })
    },
    handleFormValidate() {
      this.form = this.form.map(({ id, error, value }) => {
        return {
          id,
          error: !value,
          value,
        }
      })
      return this.form.every(({
        error
      }) => !error)
    },
    handleResetValidation() {
      this.form = this.form.map(field => {
        return {
          ...field,
          error: false
        }
      })
    },
    handleSubmitForm() {
      this.canSubmit = this.handleFormValidate()
    },
  },
  template: `
    <div>
      <button
        @click="handleAddInput(form.length + 1)"
      >ADD INPUT FIELD +</button>
      <button
        @click="handleFormValidate"
      >VALIDATE FORM</button>
      <button
        @click="handleResetValidation"
      >RESET VALIDATION</button>
      <hr />
      <form>
        <input-field
          v-for="(inputField, i) in form"
          :key="inputField.id"
          :error="inputField.error"
          :value.sync="inputField.value"
        ></input-field>
        <hr />
        <button type="submit" @click.prevent="handleSubmitForm">SUBMIT FORM</button>
      </form>
      FORM CAN BE SUBMITTED: {{ canSubmit }}
    </div>
  `
})

.input-field-wrapper {
  padding: 8px 16px;
  color: black;
}
.input-field-wrapper.error {
  color: white;
  background: red;
  transition: all 0.1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

HOW IT OPERATES

The provided code snippet operates as follows:

It contains a data attribute (form) that stores all the data from the form along with the crucial error state
Upon clicking ADD INPUT FIELD +, a new object is added to the form attribute
The template generates an InputField component for each object found in the form data attribute
The InputField component primarily renders a text input element (with an error class if validation fails) and emits the input value back to the parent for storage in the form data
Clicking VALIDATE FORM iterates through the form data, checks the value of each element, sets the error if validation fails, and updates the
```
:error="inputField.error"
```
binding accordingly
Clicking SUBMIT FORM validates the form and outputs the validation result (acting as a guard before submitting the form)
Clicking RESET VALIDATION clears the error state of every item in the form array, resetting the error display in the InputFields component

This setup demonstrates that by adopting a "data-driven" approach, direct manipulation of the DOM is not always necessary (except for rare cases where avoiding it would require excessive effort). Decoupling data and UI provides more flexibility in designing the application logic without relying on jQuery.

You can achieve your goals without using jQuery.

Answer 2

The fundamental concept here is to focus on validating the data within a form, rather than the form itself.

Some may argue that "they are the same" or "it's a subtle distinction," but there is indeed a difference.

Instead of manipulating the form UI directly with jQuery, it is recommended to store form data in the data option of Vue and only display validation results.

Vue.component('InputField', {
  props: ['error', 'value'],
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("update:value", val)
      }
    },
  },
  template: `
    <div
      class="input-field-wrapper"
      :class="{ error: error }"
    >
      <label>
        INPUT: 
        <input
          type="text"
          placeholder="Type in something"
          v-model="inputValue"
        />
        <span v-if="error">this field is required!</span>
      </label>
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      form: [],
      canSubmit: false,
    }
  },
  methods: {
    handleAddInput(id) {
      this.form.push({
        id,
        error: null,
        value: null,
      })
    },
    handleFormValidate() {
      this.form = this.form.map(({ id, error, value }) => {
        return {
          id,
          error: !value,
          value,
        }
      })
      return this.form.every(({
        error
      }) => !error)
    },
    handleResetValidation() {
      this.form = this.form.map(field => {
        return {
          ...field,
          error: false
        }
      })
    },
    handleSubmitForm() {
      this.canSubmit = this.handleFormValidate()
    },
  },
  template: `
    <div>
      <button
        @click="handleAddInput(form.length + 1)"
      >ADD INPUT FIELD +</button>
      <button
        @click="handleFormValidate"
      >VALIDATE FORM</button>
      <button
        @click="handleResetValidation"
      >RESET VALIDATION</button>
      <hr />
      <form>
        <input-field
          v-for="(inputField, i) in form"
          :key="inputField.id"
          :error="inputField.error"
          :value.sync="inputField.value"
        ></input-field>
        <hr />
        <button type="submit" @click.prevent="handleSubmitForm">SUBMIT FORM</button>
      </form>
      FORM CAN BE SUBMITTED: {{ canSubmit }}
    </div>
  `
})

.input-field-wrapper {
  padding: 8px 16px;
  color: black;
}
.input-field-wrapper.error {
  color: white;
  background: red;
  transition: all 0.1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

HOW IT OPERATES

The provided code snippet operates as follows:

It contains a data attribute (form) that stores all the data from the form along with the crucial error state
Upon clicking ADD INPUT FIELD +, a new object is added to the form attribute
The template generates an InputField component for each object found in the form data attribute
The InputField component primarily renders a text input element (with an error class if validation fails) and emits the input value back to the parent for storage in the form data
Clicking VALIDATE FORM iterates through the form data, checks the value of each element, sets the error if validation fails, and updates the
```
:error="inputField.error"
```
binding accordingly
Clicking SUBMIT FORM validates the form and outputs the validation result (acting as a guard before submitting the form)
Clicking RESET VALIDATION clears the error state of every item in the form array, resetting the error display in the InputFields component

This setup demonstrates that by adopting a "data-driven" approach, direct manipulation of the DOM is not always necessary (except for rare cases where avoiding it would require excessive effort). Decoupling data and UI provides more flexibility in designing the application logic without relying on jQuery.

You can achieve your goals without using jQuery.

What is the best approach to create a form wizard with validation using Vue.js?

Answer №1

HOW IT OPERATES

Similar questions

Loading views and controllers on-the-fly in AngularJS

call a custom form submission using jquery first, followed by a regular form submission

The state variables of React components do not always retain their most recent value

The jQuery UI Dialog refuses to close

Eliminate spaces within a string using JavaScript

Error message: The "spawn" function is not defined and is causing a TypeError to be thrown in

Experimenting with the input type generated by the Form Helper tool

Mean Stack involves the interaction between the client controller and the server controller using routes to communicate and call server methods

Creating a service function (constructor) in JavaScript

Incapable of retrieving data from MongoDB due to a failure in fetching results using streams in Highland.js

Positioning Images in Tailwind Modals

Issues arise when attempting to extract data from a data provider using JSON within the context of the Ionic framework

Using the useState hook with an array of objects is not functioning as intended

Is there a way to determine the orientation of an image in React-Native, whether it is horizontal or vertical

A guide to implementing v-for with intervals in Quasar carousel components

Rails, implementing a user-friendly form with Simple Form and a dynamic show/hide functionality

Is there a way to use Javascript to determine if a string within a JSON object has been altered?

Can someone help me with combining these two HTML and JavaScript files?

Is employing absolute paths in our confidential Node dependencies a good idea?

My Angular2+ application is encountering errors with all components and modules displaying the message "Provider for Router not found."