用jquery设置边框颜色

Question

我在一个带有单个文本框的html页面中有一个简单的表单。我希望如果我在文本框中单击任何值的提交按钮，那么文本框的边框颜色就会变成red.Here是我的代码

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

使用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 2

添加return false，我猜的形式被弄提交和重载：

$(document).ready(function(){ 
    $('.ip').click(function(){ 
    var optionSelected = false; 
    if($('#test').val().length == 0) { 
     $("#test").css("border-color","red"); 
     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/