How to disable form Submit button until fields are filled with jQuery Mobile?

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).

http://stackoverflow.com/questions/5854580/jquerymobile-button/5862415#5862415 related — Phill Pafford, Nov 07 '11 at 18:55
It's part of the solution, but that's the working part, the button gets disabled but doesn't get enabled once the form is completed. — Meki, Nov 08 '11 at 05:26

score 1 · Accepted Answer · answered Apr 11 '12 at 06:39

$(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
        });
    }
});

score 0 · Answer 2 · answered Nov 12 '11 at 06:37

You may actually be checking the values of other "buttons" like input[type="button"] or input[type="reset"]. These have a blank value unless they are set. The following code accounts for this (plus a few more caching statements):

$(document).ready(function() {
    var $form = $('#formid'), // cache
        $inputs = $form.find(':input'), // MOD extra caching
        $buttons = $inputs.not(':submit, :reset, :button'),
        $fields = $inputs.not($buttons),
        $submits = $buttons.filter(':submit');

    $submits.prop('disabled', true); // disable submit btn
    $fields.keyup(function() { // monitor all inputs for changes, MOD changed to keyup
         var disable = false;
         $fields.each(function(i, el) { // test all inputs for values
            if ($(el).val() === '') { // MOD use jQuery to get value
                    disable = true; // disable submit if any of them are still blank
                    return false; // MOD stop "each" if even one field is blank... less waste
            }
         });
         $submits.prop('disabled',disable);
        });
});

This will not account for a group of radio buttons where none were checked, however.

How to disable form Submit button until fields are filled with jQuery Mobile?

2 Answers2