当至少没有人填写时，使所有输入字段边框变为红色答案

【问题标题】：making all input fields borders red when no one at least was filled in当至少没有人填写时，使所有输入字段边框变为红色
【发布时间】：2017-04-02 20:38:26
【问题描述】：

我对 javascript 还不够好。只是我有一个带有一些输入字段的表单。用户必须至少填写其中一项。我已经找到了正确的代码来执行此操作。此代码使用警告消息告诉用户存在错误。但我想使用相同的代码将所有输入字段的边框设为红色，而不是这条警告消息。

HTML

<form  id="myform" action="" method="post">
    <input name="destination" class="form-control" type="text" >
    <input name="thingstodo" class="form-control" type="text">
    <input name="gsearch" class="form-control" type="text">
    <button type="submit" name="search">Search</button>
</form>

JavaScript

$(function(){
  $("#myform").submit(function(){

    var valid=0;
    $(this).find('input[type=text]').each(function(){
        if($(this).val() != "") valid+=1;
    });

    if(valid){
        return true;
    }
    else {
        alert("error: you must fill in at least one field");
        return false;
    }
  });
});

谢谢

【问题讨论】：

这是一个简单的更改，但我要指出，以红色突出显示所有字段 - 从用户体验的角度来看，表明所有字段都是必需的，而不仅仅是一个。我会重新考虑这个 UI。

标签： javascript jquery html css

【解决方案1】：

您可以通过设置 CSS 样式来实现。使用 jQuery 语法最容易做到这一点。

$(function(){
  $("#myform").submit(function(){

    var valid = 0; 
    $(this).find('input[type=text]').each(function(){
      if($(this).val() != "") { 
        valid++;
        $(this).css("border-color", "initial");
      }
      else {
        $(this).css("border-color", "red");
      }
    });

    if (valid > 0) { return true; }
    else { return false; }
  });
});

【讨论】：

这段代码还有一个问题。即使在填写了一个字段之后。行动没有进行
对不起，我不知道你所说的“行动没有继续”是什么意思。这是我发布的代码的一个工作示例：jsfiddle.net/q5xub1Le 显然，当您提交所有有效字段时，没有任何反应，因为该示例中没有服务器端代码。但它向您展示了验证捕获空字段并以红色突出显示它们。
这三个字段不用填，一个字段就够了，这里我要等到所有字段都填完才能按搜索键。
好的，我明白了。对不起，我误会了。请参阅此版本：jsfiddle.net/q5xub1Le/2 以及对上述答案的编辑

【解决方案2】：

像这样修改代码

$(function(){
$("#myform").submit(function(){

var valid=0;
$(this).find('input[type=text]').each(function(){

    if($(this).val() != "") valid+=1;
 else
 $(this).style.border = "solid 1px red"
});

if(valid){
    return true;
}
else {
    return false;
}
 });
 });

【讨论】：

这实际上并没有提供用户指定的行为，而是突出显示您突出显示表单元素的每个字段。
这是真的@Yoda。如何单独突出显示每个字段而不是突出显示整个表单元素？
你是对的。我只是相应地修改了它。试试这个
我试过这段代码@lhavCoder。但是即使所有字段仍然为空，返回也是正确的

【解决方案3】：

这个怎么样？

$(function(){
  $("#myform").submit(function(){
    var dirty = false;
    $('input[type=text]').each(function(){
        if($(this).val().length){
          dirty = true;
        }
    });
    if(!dirty){
      $('input[type=text]').each(function(){
        $(this).css('border','1px solid red');
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form  id="myform" action="" method="post">
    <input name="destination" class="form-control" type="text" >
    <input name="thingstodo" class="form-control" type="text">
    <input name="gsearch" class="form-control" type="text">
    <button type="submit" name="search">Search</button>
</form>

【讨论】：