Return to Answer

• $(this).val() can be simpler and faster: this.value
• but as pointed by @Troyer, it should be secured: this.value.trim();
  on the other hand, yes we might stop looping as soon as false (returning false rather than with break;, since each() is not a loop), but there can never be a significative lot of inputs so personally I'll give up, for the sake of readability
• and finally the whole condition $(this).val() === '' can be yet simplified: !this.value.trim()

• $(this).val() can be simpler and faster: this.value
• but as pointed by @Tushar, it should be secured: this.value.trim();
  on the other hand, yes we might stop looping as soon as false (returning false rather than with break;, since each() is not a loop), but there can never be a significative lot of inputs so personally I'll give up, for the sake of readability
• and finally the whole condition $(this).val() === '' can be yet simplified: !this.value.trim()

• $(this).val() can be simpler and faster: this.value
• but as pointed by @Troyer, it should be secured: this.value.trim()
• and finally the whole condition $(this).val() === '' can be yet simplified: !this.value.trim()
• on the other hand, sorry for @Troyer, no: we can't break as soon as false, since each() is not a loop!

• $(this).val() can be simpler and faster: this.value
• but as pointed by @Troyer, it should be secured: this.value.trim();
  on the other hand, yes we might stop looping as soon as false (returning false rather than with break;, since each() is not a loop), but there can never be a significative lot of inputs so personally I'll give up, for the sake of readability
• and finally the whole condition $(this).val() === '' can be yet simplified: !this.value.trim()

function checkForm() { // here, "this" is an input element var isValidForm = true; $(this).closest('form').find(':input[required]:visible').each(function() { if (!this.value.trim()) { isValidForm = false; } }); // then do something with "isValidForm"... not stated yet } 

At this step we must decide how to make this handler be launched.
It worth mention that change is not a good choice, because it fires only when the element value had changed AND the element lost focus.
So for example, based on a full valid form, if user empties a required input the submit button keeps enable till navigated to another element!

function checkForm() { // here, "this" is an input element var isValidForm = true; $(this).closest('form').find(':input[required]:visible').each(function() { if (!this.value.trim()) { isValidForm = false; } }); $(this).closest('form').find('.monitored-btn').prop('disabled', !isValidForm); } 

function checkForm() { // here, "this" is an input element var isValidForm = true; $(this).closest('form').find(':input[required]:visible').each(function() { if (!this.value.trim()) { isValidForm = false; } }); $(this).closest('form').find('.monitored-btn').prop('disabled', !isValidForm); return isValidForm; } $('.monitored-btn').closest('form') // indirectly bind the handler to form .submit(function() { return checkForm.apply($(this).find(':input')[0]); }) // look for input elements .find(':input[required]:visible') // bind the handler to input elements .keyup(checkForm) // immediately fire it to initialize buttons state .keyup(); 

const inputSelector = ':input[required]:visible'; function checkForm() { // here, "this" is an input element var isValidForm = true; $(this).closest('form').find(inputSelector).each(function() { if (!this.value.trim()) { isValidForm = false; } }); $(this).closest('form').find('.monitored-btn').prop('disabled', !isValidForm); return isValidForm; } $('.monitored-btn').closest('form') // in a user hacked to remove "disabled" attribute, also monitor the submit event .submit(function() { // launch checkForm for the first encountered input, // use its return value to prevent default if form is not valid return checkForm.apply($(this).find(':input')[0]); }) .find(inputSelector).keyup(checkForm).keyup();

form { border: 1px solid #000; margin: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <form action="#myForm"> Name * <input name="myForm-name1" placeholder="required" required> <br /> Surname * <input name="myForm-surname" placeholder="required" required> <br /> Age <input name="myForm-surname" placeholder="not-required"> <br /> <button id="myForm-submitBtn" class="monitored-btn" type="submit">Submit</button> </form> <form action="#otherForm"> Name * <input name="otherForm-name1" placeholder="required" required> <br /> Surname * <input name="otherForm-surname" placeholder="not-required"> <br /> Age <input name="otherForm-surname" placeholder="required" required> <br /> <button id="otherForm-submitBtn" class="monitored-btn" type="submit">Submit</button> </form></body>

function checkForm() { // here, "this" is an input element var isValidForm = true; $(this.form).find(':input[required]:visible').each(function() { if (!this.value.trim()) { isValidForm = false; } }); // then do something with "isValidForm"... not stated yet } 

At this step we must decide how to make this handler be launched.
It worth mention that change is not a good choice, because it fires only when the element value had changed AND the element lost focus.
So for example, based on a full valid form, if user empties a required input the submit button remains enabled till navigated to another element!

function checkForm() { // here, "this" is an input element var isValidForm = true; $(this.form).find(':input[required]:visible').each(function() { if (!this.value.trim()) { isValidForm = false; } }); $(this.form).find('.monitored-btn').prop('disabled', !isValidForm); } 

function checkForm() { // here, "this" is an input element var isValidForm = true; $(this.form).find(':input[required]:visible').each(function() { if (!this.value.trim()) { isValidForm = false; } }); $(this.form).find('.monitored-btn').prop('disabled', !isValidForm); return isValidForm; } $('.monitored-btn').closest('form') // indirectly bind the handler to form .submit(function() { return checkForm.apply($(this).find(':input')[0]); }) // look for input elements .find(':input[required]:visible') // bind the handler to input elements .keyup(checkForm) // immediately fire it to initialize buttons state .keyup(); 

const inputSelector = ':input[required]:visible'; function checkForm() { // here, "this" is an input element var isValidForm = true; $(this.form).find(inputSelector).each(function() { if (!this.value.trim()) { isValidForm = false; } }); $(this.form).find('.monitored-btn').prop('disabled', !isValidForm); return isValidForm; } $('.monitored-btn').closest('form') // in a user hacked to remove "disabled" attribute, also monitor the submit event .submit(function() { // launch checkForm for the first encountered input, // use its return value to prevent default if form is not valid return checkForm.apply($(this).find(':input')[0]); }) .find(inputSelector).keyup(checkForm).keyup();

form { border: 1px solid #000; margin: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <form action="#myForm"> Name * <input name="myForm-name1" placeholder="required" required> <br /> Surname * <input name="myForm-surname" placeholder="required" required> <br /> Age <input name="myForm-surname" placeholder="not-required"> <br /> <button id="myForm-submitBtn" class="monitored-btn" type="submit">Submit</button> </form> <form action="#otherForm"> Name * <input name="otherForm-name1" placeholder="required" required> <br /> Surname * <input name="otherForm-surname" placeholder="not-required"> <br /> Age <input name="otherForm-surname" placeholder="required" required> <br /> <button id="otherForm-submitBtn" class="monitored-btn" type="submit">Submit</button> </form></body>