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

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