sides of march (Brian DeMarzo)

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/