Question

我正在尝试使用jquery来检查是否已经填写了每个输入字段。如果是的话，我想在表格周围做一个绿色边框。

这是我的方法：

if($('input:text[value=""], textarea[value=""]').length == 0){
    alert("DONE");
}

Hovever value =“” - 选择器不起作用。

似乎value-attribute只包含输入字段的default-value，而不包含用户插入的实际内容 - 根据firebug。

此命令提醒我实际内容：

$('input:text[value!=""]').each(function(){
    alert($(this).val());
});

我的问题：实际的输入字段内容存储在哪里？如果有空字段，我怎样才能有效地使用jQuery进行检查？

Answer 1

你是对的，属性选择器只能使用属性真正具有的值。稍后，更改输入的值只会更改DOM元素的内部状态。

实际的输入字段内容存储在哪里？

您可以通过DOM元素value的{{1}}属性访问该值。

如果有空字段，我怎样才能有效地检查jQuery？

您可以使用.filter：

elementNode.value

Answer 2

验证输入的一种巧妙方法是将验证规则附加到元素，以便脚本查找和验证。

制作所需的字段：

<input type="text" data-validate="required" />

你的剧本：

$('[data-validate]').each(function() {
    var rule = $(this).attr('data-validate'), value = $(this).val();

    switch (rule) {
        case 'required':
            if (!value) {
                alert('Field invalid!');
            }
        break;
    }
});

对我来说非常好。

通过仅选择特定元素类型或特定元素（例如表单）的子元素，可以提高效率。

Answer 3

您可以尝试使用.filter()，如下所示：

var empty = $('input:text').filter(function(){ return $(this).val() == "" }).length;

if(empty > 0){
    alert("There are "+empty+" fields which have not been filled out");
}

Answer 4

如果您不愿意使用Jquery验证我的方法。

为每个输入字段添加一个类，然后使用Jquery class selector来测试这些字段是否已填充。你也可以使用它来下拉。

Answer 5

你应该使用这种结构：

var incomplete = $('form :input').filter(function() {
  return $(this).val() == '';
});

if (incomplete) {
  alert('Please fill all fields!');
}

：输入选择器选择所有输入，textarea，select和按钮元素。

阅读本文：http://api.jquery.com/input-selector/

value-attribute似乎不显示input-field-content

5 个答案: