Question

I’ve been looking for a solution to disable the form submit button until the required fields are filled. I’ve found something here at stackoverflow (courtesy of mblase75), but it’s for standard jQuery and doesn’t work with jQuery Mobile.

The reason behind this is that there’s a form on a mobile page that requires all fields to be filled before submitting it. Validation is solved via php so it’s not a necessary part.

$(document).ready(function() {
    $form = $('#formid'); // cache
    $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
    $form.find(':input').change(function() { // monitor all inputs for changes
         var disable = false;
         $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
            if ($.trim(el.value) === '') {
                    disable = true; // disable submit if any of them are still blank
            }
         });
         $form.find(':input[type="submit"]').prop('disabled',disable);
        });
    });

Sadly I’m not a jQuery guru, and if possible I’d like some help with this.
Also any other suggestions are welcome (even for validation with jQuery mobile).

Answer 1

$(function() {
    var form = $('#formid');
    var submitBtn = $('#submitBtnId');

    submitBtn.addClass('disable');

    form.submit(function()

        if(validate()) {
            submitBtn.removeClass('disable');
        }

        if(submitBtn.hasClass('disable')) {
            return false;
        }

        else {
            return true;
        }

    });

    function validate() {
        form.find('input, textarea').change(function(){
            // validation goes here if all inputs are validate then return true otherwise false
        });
    }
});