JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<label>Field1</label>
<input type="text" id="field1" class="required-valid" />
<label>Field2</label>
<input type="text" id="field2" class="required-valid" />
<button id="formsubmit" disabled>
Submit
</button>
</form>
JavaScript
$('form .required-valid').on('input paste change', function() {
var $required = $('form .required-valid');
//filter required inputs to only ones that have a value.
var $valid = $required.filter(function() {
return this.value != '';
});
//set disabled prop to false if valid input count is != required input count
$('#formsubmit').prop('disabled', $valid.length != $required.length);
})