使用 jQuery 检查表单是不是有输入元素

Posted 2023-05-09

【中文标题】使用 jQuery 检查表单是不是有输入元素

【英文标题】：Checking if a form has input elements using jQuery使用 jQuery 检查表单是否有输入元素

【发布时间】：2013-10-06 00:55:04

【问题描述】：

我正在使用 Yii php 框架开发一个应用程序，并且我正在使用 jQuery 进行表单验证。我有一个带有 form 的页面，其中包含 checkboxes 的输入元素。

但是，这些复选框是动态创建的，具体取决于条目。

为了更好地理解它，我正在制作一个交叉矩阵，基本上是一个表格，有 rows 代表females 和 columns 代表男性，并定义 checkboxes有交叉点的单元格。字面意思是男性和女性个体的交叉矩阵。

但是如果还没有男性和女性被定义为交叉，那么对于验证，它应该不允许用户提交。

我的问题是如何知道表单是否没有元素？

如果有复选框元素，我如何才能知道用户是否至少选中了其中一​​个？

这是我尝试过的，但它似乎没有抓住它，表单仍然提交数据，我想知道为什么：

$('#crossingMatrixForm').submit(function() 

       $(":input").each(function() 
           if ($(this).val() === empty()) 
               alert("form empty!");
               return false;
           
       );

);

【参考方案1】：

您可以查看表单中是否存在至少一个复选框并被选中

$('#crossingMatrixForm').submit(function()    
    if (!$(this).find("input:checked").length) 
        alert("form empty!");
        return false;
    
);

如果您想区分“不存在复选框”和“至少存在一个，但没有被选中”，您可以使用$(this).find(":checkbox") 表示前者，而使用.filter(":checked") 表示后者。在这两种情况下，使用.length 来查看是否至少存在一个控件：

$('#crossingMatrixForm').submit(function()    
    var checkboxes = $(this).find(":checkbox");
    if (!checkboxes.length) 
        alert("form empty!");
        return false;
    
    else if (!checkboxes.filter(":checked").length) 
        alert("none selected!");
        return false;
    
);

【讨论】：

谢谢先生，这两种情况我不再需要区分了

【参考方案2】：

根据Documentation：empty()是：

Description: Remove all child nodes of the set of matched elements from the DOM.

所以你必须使用" "来比较字符串。

【参考方案3】：

jQuery 允许您测试:checkbox 字段以及是否有:checked。因此，您可以尝试以下方法：

$('#crossingMatrixForm').submit(function()
    var $this = $(this);
    if (!$this.find('input:checkbox').length || !$this.find('input:checked').length) 
        alert('Form empty!');
        return false;
    
);