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

stackoverflow.com/questions/5854580/jquerymobile-button/… related — Phill Pafford
– Phill Pafford, Commented Nov 7, 2011 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
– Meki, Commented Nov 8, 2011 at 5:26

Tarun · Accepted Answer · 2012-04-11 06:39:50Z

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

answered Apr 11, 2012 at 6:39

Tarun

1,9084 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason · Accepted Answer · 2011-11-12 06:37:52Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related