Javascript code to change input border colour

Question

I'm learning some Javascript, which I'm incorporating into another project. I have some input fields with maxlength set at 20. They currently have a border set to them via CSS:

.textInput:focus {
    border: 2px solid green;
}

I'd like for the border of the input fields to go red when the user hits the maxlength limit - this part I've achieved:

$("#newsTitle").keypress(function() {
if($(this).val().length == 20) {
    document.getElementById('newsTitle').style.borderColor = "red";
   }
});

However, if the user is to delete some text, or backspace, I'd like the border to go BACK to green. Could someone give me some pointers on how to do this?

If theres a more efficient way to achieve what I have so far, do tell me. I feel my approach is a bit bulky and that theres no need to give the element ID twice if its within an if statement, which applies to the element ID in question.

Cheers,

Jack

VXp · Accepted Answer · 2018-04-09 18:55:29Z

3

I would actually do it like this:

$(function() {
  $("#newsTitle").keydown(function() {
      $(this).toggleClass('invalid', $(this).val().length >= 20);
  });
});

.textInput:focus {
  border: 2px solid green;
}

.textInput.invalid,
.textInput.invalid:focus {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="textInput" id="newsTitle">

edited Apr 9, 2018 at 18:55

VXp

12.1k6 gold badges34 silver badges47 bronze badges

answered Apr 9, 2018 at 18:49

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack Anyon Over a year ago

I really like this answer thank you. I like how the script actually triggers the different CSS depending on the value. Much appreciated!

VXp · Accepted Answer · 2018-04-09 18:55:21Z

1

$("#newsTitle").keypress(function() {
  if($(this).val().length == 20) {
      $(this)[0].style.borderColor = "red";    
  } else {
      $(this)[0].style.borderColor = "green";
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="newsTitle">

edited Apr 9, 2018 at 18:55

VXp

12.1k6 gold badges34 silver badges47 bronze badges

answered Apr 9, 2018 at 18:45

Jim W

5,0261 gold badge31 silver badges46 bronze badges

Comments

user9621268 · Accepted Answer · 2018-04-09 19:18:00Z

1

You can try this code

$("#newsTitle").keypress(function() {

  if($(this).val().length >= 20) {
   $(this).removeClass("valid");
      $(this).addClass("invalid");  
  } else {
    $(this).addClass("valid");
    $(this).removeClass("invalid");
  }
});

.invalid {
   border: 2px solid red;
}

.valid {
   border: 2px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id="newsTitle">

answered Apr 9, 2018 at 19:18

user9621268

Collectives™ on Stack Overflow

Javascript code to change input border colour

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related