[Vuejs]-Why is the form data not validated by the front-end?

by

0👍

In signup() method before making an API call, you can check for the required fields. If there is no data in the fields don’t make an API call.

For Ex :

signup() {
  if (this.first_name && this.email && this.password_key) {
    // Make an API call
  } else {
    // Show error messages for each field validity.
  }
}

You can also use HTML5 required attribute if you are only looking for the required field validation.

Demo :

new Vue({
  el: '#app',
  data: {
    first_name: '',
    email: '',
    password_key: ''
  },
  methods: {
    signup() {
        console.log('form submitted!');
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form @submit="signup">
    First Name :<input type="text" v-model="first_name" required/><br>
    Email :<input type="text" v-model="email" required/><br>
    Password :<input type="password" v-model="password_key" required/><br>
    <button type="submit">Submit</button>
  </form>
</div>

0👍

You can use vee-validate package to validate you data in front end part

here is an example :

https://codesandbox.io/s/y3504yr0l1?initialpath=%2F%23%2Fform&module=%2Fsrc%2Fcomponents%2FForm.vue

Leave a comment