用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/