Установка цвета границы с помощью jquery

Question

Установка цвета границы с помощью jquery

0

У меня простая форма на 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>

Но происходит то, что если я нажму кнопку "Отправить" без какого-либо значения в текстовом поле, тогда цвет рамки текстового поля будет красным на мгновение. Красный бодер не сохраняется в текстовом поле

Ayan Biswas 24 сен. 2013, в 11:56

Источник

Теги:

jquery

3 ответа

4

добавьте return false, я думаю, что форма действительно отправляется и перезагружается:

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

Alex 24 сен. 2013, в 07:21

0

Здесь лучший способ сделать это, если вы используете формы. Вместо использования события 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/

vivek 24 сен. 2013, в 08:02

Ещё вопросы

Somnath Kharat · Accepted Answer · 2013-09-24T07-25-00.000Z

используйте 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