У меня простая форма на 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>
Но происходит то, что если я нажму кнопку "Отправить" без какого-либо значения в текстовом поле, тогда цвет рамки текстового поля будет красным на мгновение. Красный бодер не сохраняется в текстовом поле
используйте 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;
}
});
});
добавьте return false, я думаю, что форма действительно отправляется и перезагружается:
$(document).ready(function(){
$('.ip').click(function(){
var optionSelected = false;
if($('#test').val().length == 0 ) {
$("#test").css("border-color","red");
return false;
}
});
});
Здесь лучший способ сделать это, если вы используете формы. Вместо использования события click я использую событие submit.
$(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/