Question

我一直在寻找一种解决方案来禁用表单提交按钮，直到填写必填字段。我在stackoverflow找到了一些东西（由mblase75提供），但它适用于标准jQuery，不适用于jQuery Mobile。

背后的原因是移动页面上有一个表单，要求在提交之前填写所有字段。验证是通过php解决的，因此它不是必要的部分。

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

可悲的是，我不是一个jQuery大师，如果可能的话，我会对此有所帮助。还欢迎任何其他建议（即使是使用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
        });
    }
});

Answer 2

您实际上可能正在检查其他“按钮”的值，例如输入[type =“button”]或输入[type =“reset”]。除非已设置，否则它们具有空值。以下代码说明了这一点（加上一些缓存语句）：

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

但是，这不会考虑一组没有选中的单选按钮。

如何在字段填充jQuery Mobile之前禁用表单提交按钮？

2 个答案: