Sometimes, you work within the constraints of an existing application, trying to change as little as possible. So when a client had a very simple (two field) form, that showed up as a Bootstrap modal, and I needed to make sure the user didn’t click the submit button until they filled out all the fields, I simply dropped in the following JavaScript.
$(document).on('change keyup', '[required]', function() {
var targetForm = $($('[required]')[0].form);
var requiredOk = targetForm.find('[required]').filter(function () { return $(this).val().length == 0; }).length == 0;
targetForm.find(':submit').prop('disabled', !requiredOk);
});
I then marked up my form fields by adding required property to each field that was required to be true. A simplified example follows.
<form id="form1">
<input type="text" id="input1" required /><br />
<textarea id="textarea1" required></textarea><br />
<button type="submit" disabled>
Submit
</button>
</form>
Now, your submit buttons will automatically disable/enable. It doesn’t work in more complex forms with other field types, but I did start off by saying this was a “simple” solution, after all.
JSFiddle here: https://jsfiddle.net/05wyu3az/