Remove disabled after filling all required fields in Form

Question

How to remove disabled from submit button when I fill in form all required fields using Jquery. Here is my HTML:

<form action="" method="post" class="my_form">
    <input type="text" class="form-control">

    <select class="form-control" required>
        <option value="" disabled selected>Select</option>
        <option value="Value 01">Value 01</option>
        <option value="Value 02">Value 02</option>
        <option value="Value 03">Value 03</option>
        <option value="Value 04">Value 04</option>
    </select>

    <input type="text" class="form-control">

    <textarea class="form-control" rows="3" required></textarea>

    <button type="button" data-dismiss="modal" disabled>Save</button>
</form>

Answer 1

You could have a on input and on blur event that checks for all required fields when something is entered in the field or focus is lost.

Check this fiddle . Should give you a feel of what I mean.

Answer 2

Use the following approach with jquery prop method and Array.every method:

$(".my_form :input[required]").on("change paste", function(){
    var requiredEls = $(".my_form :input[required]").toArray(), filled;
    filled = requiredEls.every(function(v){ // ensure that all required fields are filled
        return v.value.trim();
    });

    $(".my_form :button").prop('disabled', (filled)? false : true);
});