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>

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

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 false和css("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;
    }
  });
});

DEMO

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/

用jquery设置边框颜色

3 个答案: