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

像这样修改代码

$(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 2

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

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

3 个答案: