how to disable a button unti all the required fields are filled

Question

here I want to make a button disable until all the required fields are filled. In disable condition button color should be grey. And if all the fields are filled completely then button should enable with different color. And again if we click on previous button then again condition should render and button should enable but in my case if i am clicking on previous button then it is going into a disable condition. So how to achieve this.

<form>
<div step == 1>
  <input id='first' type='text' v-model='first' />
  <input id='second' type='text' v-model='second' />
  <input id='third' type='text' v-model='third' />
  <button id="button123">Next</button>
</div>

<div step == 2>
  <input id='first1' type='text' v-model='first' />
  <input id='second2' type='text' v-model='second' />
  <input id='third3' type='text' v-model='third' />
  <button>previous</button>
  <button>Next</button>
</div>
</form>

<script>
function checkForm(){
    var name = document.getElementById("first").value;
    var cansubmit = (name.length > 0);
    document.getElementById("button123").disabled = !cansubmit;
    document.getElementById("button123").style.color = "red";
    };
</script>

Answer 1

You can create an array with every inputs of the form in it with 'every function'

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/every

And while not every input return true, it will return false and so you can disabled the button