jquery - 检查类是否已填充jQuery

Question

我有一个关于 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>

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

Answer 1

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

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

这假定应将所有空白值视为已填充字段。如果它不应该你需要.trim()的价值。

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

Answer 2

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

Answer 3

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

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

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

如果具有类的输入之一red是空字符串，它将不会继续

Answer 4

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

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

Answer 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')   
    }
});

检查小提琴

Answer 6

尝试

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

});

演示：小提琴

Answer 7

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

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