Javascript 当至少没有人填写时，将所有输入字段边框设为红色

我对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>

---

谢谢

这样修改代码

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

---

您可以通过设置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; }
  });
});

---

这个怎么样？

$（函数（）{
$（“#myform”）.submit（函数（）{
var-dirty=false；
$（'input[type=text]'）。每个（函数（）{
if（$（this.val（）.length）{
肮脏=真实；
}
});
如果（！脏）{
$（'input[type=text]'）。每个（函数（）{
$（this.css（'border'，'1px solid red'）；
});
}
});
});

搜寻
这是一个简单的更改，但我要指出，从用户体验的角度来看，以红色突出显示所有字段表示所有字段都是必需的，而不仅仅是一个字段。我会重新考虑这个UI。这实际上并没有提供用户指定的行为，而不是突出显示表单元素的每个字段。这是真的@Yoda。如何分别突出显示每个字段而不是突出显示整个表单元素？你是对的。我只是做了相应的修改。试试这个，我试过这个代码@lhavCoder。但是，即使所有字段仍然为空，返回也为真。这段代码中仍然存在问题。即使填写了一个字段。行动没有进展对不起，我不知道你说的“行动没有进展”是什么意思。下面是我发布的代码的一个工作示例：显然，当您提交所有字段都有效时，不会发生任何事情，因为该示例中没有服务器端代码。但它显示验证捕获空字段并以红色突出显示它们。我不必填写这三个字段，一个字段就足够了，在填写所有字段之前，我将无法按下搜索按钮。好的，我明白了。对不起，我误解了。请参阅此版本：并对上面的答案进行编辑
$(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; }
  });
});