用jquery设置边框颜色答案

【问题标题】：Setting border colour with jquery用jquery设置边框颜色
【发布时间】：2013-09-24 09:25:10
【问题描述】：

我在一个带有单个文本框的 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>

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

【问题讨论】：

标签： jquery

【解决方案1】：

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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/

【讨论】：