jquery - 用jquery设置边框颜色

Question

我在一个带有单个文本框的 html 页面中有一个简单的表单。我希望如果我单击提交按钮而文本框中没有任何值，那么文本框的边框颜色应该是红色的。这是我的代码

$(document).ready(function(){
  $('.ip').click(function(){
    var optionSelected = false;
    if($('#test').val().length == 0 ) {
      $("#test").css("border-color","red"); 
    }
  });
});

这是表格

<form action="" id="form1">
Test:<input type="text" name="test" id="test">
<input type="submit" class ="ip">
</form>

但是发生的情况是，如果我单击文本框中没有任何值的提交按钮，则文本框的边框颜色会暂时设置为红色。红色边框不会保留在文本框中

Answer 1

添加一个返回false，我猜表单确实被提交并重新加载：

$(document).ready(function(){
  $('.ip').click(function(){
    var optionSelected = false;
    if($('#test').val().length == 0 ) {
      $("#test").css("border-color","red");
      return false;
    }
  });
});

Answer 2

使用return falseandcss("border","1px solid red")而不是css("border-color","red")

$(document).ready(function(){
  $('.ip').click(function(){
    var optionSelected = false;
    if($('#test').val().length == 0 ) {
      $("#test").css("border","1px solid red");//more efficient
      return false;
    }
  });
});

演示

Answer 3

如果您使用表单，这是一种更好的方法。我使用的是提交事件，而不是使用点击事件。

$(document).ready(function(){
  $('#form1').submit(function(e) {
    var optionSelected = false;
    if($('#test').val().length != 0 ) {
      return true;
    } else { 
      $("#test").css("border-color","red");
    }

    e.preventDefault();
  });
});

这是它的 jsfiddle：http: //jsfiddle.net/UtqcA/