检查类是否已填充jQuery答案

【问题标题】：Check if class is filled jQuery检查类是否已填充jQuery
【发布时间】：2013-06-06 10:15:35
【问题描述】：

我有一个关于 javascript 检查的问题。

我有以下表格

<form name='form' id='form' method='post' action='next.php'>

<input type='text' class='red'  />
<input type='text' class='red'  />
<input type='text' class='red'  />
<input type='text' class='blue' />
<input type='text' class='blue' />
<input type='submit' value='Next' />

</form>

我想要完成的是，只有填写了“红色”类的任何一个字段才能提交表单。因此，如果用户只填写了一个或多个“蓝色”类字段，他们会收到一个警告，提示他们还需要至少填写一个“红色”类字段。

【问题讨论】：

标签： jquery class input

【解决方案1】：

您可以连接到表单的提交事件，并使用 red 类遍历所有字段并返回结果。如果提交事件返回 false，则不会提交表单

$("#form").submit(function(){
   var exist = false;
   $(this).find("input.red").each(function(){
          exist = exist || this.value;
   });
   return exist;
})

这假定应将全空白值视为已填充字段。如果不应该，您需要.trim() 值。

当存在设置为 true 时，可以使版本提前退出，但对于少量元素而言，它不太可能明显更快

【讨论】：

你的回答在这里是最完整的，不管有没有trim +1

【解决方案2】：

试试

$('#form').submit(function(){
    var valid = $(this).find('input.red').filter(function(){
        return $.trim(this.value) != '';
    }).length > 0;
    if(!valid){
        alert('fill red');
        return false;
    }

});

演示：Fiddle

【讨论】：

填充空格的 .red 输入怎么样？ ;)
@roasted 我们可以使用$.trim()

【解决方案3】：

您似乎想检查是否至少填写了一个.red 输入：

$("#form").submit(function() {
    if($(this).find('.red').filter(function(){return $.trim(this.value) != ""}).length === 0)
       return false;        
});

【讨论】：

OP 只说未填充，可能或可能不暗示应该忽略所有空白字符串
由 OP 选择 ;)
我同意，但由于您的代码为他选择，我只是建议明确地代表他提及您的选择

【解决方案4】：

这是你想要达到的目标吗？

  var failed = false;
  $(".red").each(function(i, elem){
     if($(elem).val() == ""){
        failed = true;
        return false;
     }
  });

  if (failed){
  //don't proceed
  }

如果red 类的输入之一是空字符串

，它将不会继续

【讨论】：

【解决方案5】：

试试这个

$('input[type=submit]').on('click', function (e) {
    e.preventDefault();
    var check = $('.red').filter(function() {
        return this.value != ''
    }).length;

    if(check < 1){
     alert('Fill out red class input')   
    }
});

Check Fiddle

【讨论】：

【解决方案6】：

$("#submit").click(function() {
    var exist ;

    $("#formId input[type=text]").each(function() {
        if($(this).hasClass('red')) 
         if($(this).val() != "") 
            exist = true;             
    });

    if(exist == true) {
        // red class exist
    } else {
        alert("No Red Class");
        return false;
    }
});

【讨论】：

我不明白OP这样的问题
您没有检查任何值，也没有处理提交事件。无需点击提交按钮即可提交表单
@RuneFS 我正在检查存在值
@RuneFS 我不喜欢什么
填充意味着不给价值

【解决方案7】：

对于您的用例，请使用以下内容：

$("#form").submit(function () {
    if ($(this).find('.red').filter(function () {
                return $.trim(this.value) != ""
            }).length === 0)
        return false;
});

【讨论】：