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

Question

我对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;
    }
  });
});

谢谢

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

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

Answer 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>