[Vuejs]-Form in VueJS is not checking if both inputs are empty

0👍

You could use Computed Properties and add value field to your inputFields. To check if the form can be sent, you can use every:

var app = new Vue({
    el: '#app',
    data: {
      inputFields: [
        {
          name: 'first_name',
          type: 'text',
          label: 'First Name',
          placeholder: 'First Name',
          required: true,
          validation_message: 'First name is required',
          value: null,
        },
        {
          name: 'email',
          label: 'Email',
          type: 'email',
          placeholder: 'Email',
          required: true,
          validation_message: 'Email is required',
          value: null,
        }
      ],
    },
    computed: {
      allowSubmitForm: function(){
            return this.inputFields.every(
              inputField => inputField.value != null 
              && inputField.value != undefined
              && inputField.value != '');
        }
    }
  })
<div id="app">
   <form>
      <input v-for="inputField in inputFields"
      :type="inputField.type"
      :placeholder="inputField.placeholder"
      :name="inputField.name"
      :id="inputField.name"
      v-model="inputField.value" />
      <button type="submit" :disabled="!allowSubmitForm">Submit</button>
   </form>
</div>

Leave a comment