Jquery 当特定输入有效时显示按钮

我有一个包含多个输入的HTML表单。有些具有必选的类

我想在所有这些字段都有值后显示“提交”按钮

我尝试使用：

$（文档）.ready（函数（）{
$（“#提交按钮”）.hide（）；
$（'.required'）。在（'keyup'，函数（）{
if（$（this.val（）！=“”）{
$（“#提交按钮”）.show（）；
}否则{
$（“#提交按钮”）.hide（）；
}
});
});

但如果只有一个输入不是空的，则会显示该按钮

如果所有带有

必需

类的输入都不为空，是否可以对多个输入执行此操作

检查所需功能

function CheckRequired(event) {
    var $form = $(this);

    var emptyElements = $form.find('.required').filter(function() {
        return this.value === ''
    });

    if(emptyElements.length > 0) {
        event.preventDefault();

        emptyElements.addClass("EmptySelect").attr('title', 'This field is required');

        //alert(emptyElements.attr("id"));
        alert("One or more fields cannot be blank");

        event.stopImmediatePropagation();
        return false;
    }
}

试着这样做：

<script type="text/javascript">
  $(document).ready(function() {
    $("#submit_button").hide();

  $('.required').each('keyup', function () {
    if($(this).val() !== "") {
        $("#submit_button").show();
    } else {
        $("#submit_button").hide();
    }
  });
});
</script>

$（文档）.ready（函数（）{
$（“#提交按钮”）.hide（）；
$（'.required'）。每个（'keyup'，函数（）{
if（$（this.val（）！=“”）{
$（“#提交按钮”）.show（）；
}否则{
$（“#提交按钮”）.hide（）；
}
});
});

您必须使用循环检查

键控

上的所有必需输入：

<script type="text/javascript">
$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {
        var showBtn = true;
        // Check all inputs
        $('.required').each(function () {
            showBtn = showBtn && ($(this).val() !== "");
        }); //Edited
        // Hide or show the button according to the boolean value
        $("#submit_button").toggle(showBtn);
    });
});
</script>

$（文档）.ready（函数（）{
$（“#提交按钮”）.hide（）；
$（'.required'）。在（'keyup'，函数（）{
var showBtn=真；
//检查所有输入
$（'.required'）。每个（函数（）{
showBtn=showBtn&（$（this.val（）！=）；
})；//编辑
//根据布尔值隐藏或显示按钮
$（“#提交按钮”）。切换（showBtn）；
});
});

用户通常不会一次访问多个控件。更重要的是，事件一次处理一个。因此，您只需使用计数器检查是否已填写所有必填字段，而无需检查每个

keyup

事件上的所有字段。你只需要记录一个字段以前是否有效，以免弄乱计数器。以下是一个高效的解决方案：

<script type="text/javascript">
$(document).ready(function() {
    var button = $('#submit_button');
    var required = $('.required');
    var counter = 0;
    var trigger = required.length;
    button.hide();

    required.on('keyup', function () {
        var self = $(this);
        if(self.val() !== '') {
            if (!self.data('valid') && ++counter === trigger) button.show();
            self.data('valid', true);
        } else {
            if (self.data('valid')) --counter;
            button.hide();
            self.data('valid', false);
        }
    });
});
</script>

$（文档）.ready（函数（）{
var按钮=$（“#提交按钮”）；
所需变量=$（'.required'）；
var计数器=0；
var触发器=所需的.length；
按钮隐藏（）；
必需。on（'keyup'，函数（）{
var self=$（这是）；
如果（self.val（）！=''）{
如果（！self.data（'valid'）&&++计数器===触发器）按钮.show（）；
self.data（'valid'，true）；
}否则{
if（self.data（'valid'））——计数器；
按钮隐藏（）；
self.data（'valid'，false）；
}
});
});

小提琴：

$（文档）.ready（函数（）{
var标志=真；
$（'.required'）.keyup（函数（）{
$（'.required'）。每个（函数（索引、响应）{
if（$（this）.val（）==“”）{
flag=false；
返回；
}
否则{
flag=true；
}
});
如果（标志==真）{
$（“#提交”）.show（）；
}
否则{
$（“#提交”）.hide（）；
}
});
});

逻辑很简单：

假设我们会显示按钮

查看每个必需的输入

如果其中任何一个是空的，我们需要隐藏按钮，不需要再检查任何输入

不要只看

keyup

。这不会捕获通过鼠标/等粘贴的数据。为了安全起见，我还会观看

更改

和

模糊

$（文档）.ready（函数（）{
//显示提交按钮*仅*当所有
//。必填字段有一个值
//
var checkRequired=函数（）{
var allValid=true；//假设我们准备好了
$（'.required'）。每个(
函数（）{
if（this.value.trim（）=“”）{
//我们一碰到空旷的场地就失败了
allValid=false；
return false；//这将结束each（）循环
}
}
);
$（“#提交按钮”）。切换（所有有效）；
}
$（'.required'）.bind（'keyup change blur'，checkRequired）；
checkRequired（）；//以正确的状态启动
});
。必需{
边框：2倍纯红；
}
你能试试这个代码吗。它会对你有用的

$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {                    
           ToggleSubmitButton();
    }); 
});

function ToggleSubmitButton()
{
    $("#submit_button").hide();
    var getRequiredLength = $('.required').length;
    var nonempty = $('.required').filter(function() {
        return this.value != ''
    }).length;

    if(getRequiredLength ==  nonempty){
        $("#submit_button").show();
    }

}

如果您的输入确实是
必需的
，那么您可以使用：invalid伪类来获取所有必需的空字段，如果集合的长度是，那么我刚才遇到了这个问题。让我添加另一种方法来处理此问题

HTML

<form>
  <input type="text" name="a" value="" required>
  <input type="text" name="b" value="" required>
  <input type="submit" id="submit_button" disabled>
</form>

JavaScript

var submit = $('#submit_button'),
    required = $('input[required]');

required.on('keyup', function() {
    if (0 == required.filter(function() { return '' == this.value; }).length) {
        submit.addClass('active').prop('disabled', false);
    }
});

它的工作原理


默认情况下，使用CSS会隐藏“提交”按钮。这样可以避免在加载页面时它可能很快闪烁。它也被禁用

必填输入字段具有属性

required

，如果输入为空，该属性还可能显示浏览器验证信息。这是使用类

.required

的替代方法。当然，您仍然可以将选择器从

input[required]

更改为

。required

提交按钮以及所有必填字段都存储在变量中（

submit

和

required

）。这是为了避免对每个

keyup

事件处理程序进行大量重新查询

最后，在每个

keyup

上，先前选择的输入被过滤为空

值。如果结果为空（
0==list.length
），则通过添加一个CSS类
active
（当然可以命名为
enabled
或类似名称）来显示该按钮。这样做的好处是，您可以轻松添加过渡等内容。它还增强了CSS和JavaScript的解耦

最后的想法

使用

keyup

可能只适用于文本输入。如果您有其他要跟踪的输入，例如

#submit_button {
  display: none;
}

#submit_button.active {
  display: inline;
}

var submit = $('#submit_button'),
    required = $('input[required]');

required.on('keyup', function() {
    if (0 == required.filter(function() { return '' == this.value; }).length) {
        submit.addClass('active').prop('disabled', false);
    }
});

if (0 == required.filter(function() { return '' == this.value; }).length) {
  submit.addClass('active').prop('disabled', false);
} else {
  submit.removeClass('active').prop('disabled', true);
}