Solved

jQuery: Select input where value length less than 5

Posted on 2016-09-08
5
94 Views
Last Modified: 2016-09-09
Using jQuery, how can I make all the input fields red that have values shorter than 5 characters long?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('input:val<5').css('background','red');
});
</script>
</head>
<body>

<div>
 <input type="text" value="red" />
 <input type="text" value="hello world" />
 <input type="text" value="r" />
 <input type="text" value="" />
</div>

</body>
</html>

Open in new window

0
Comment
Question by:skij
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 450 total points
ID: 41790719
There isn't a selector for length of an attribute/property's value.

You need to pass a function to jQuery's filter method to compare it.

$('input').filter(function(i,el){
  return (el.value.length<5);
}).css('background','red');

Open in new window

0
 
LVL 56

Assisted Solution

by:Julian Hansen
Julian Hansen earned 50 total points
ID: 41790775
Just a slight correction to David's code
$('input[type="text"]').filter(function(i,el){
  return (el.value.length<5);
}).css('background','red');

Open in new window

In the sample it makes no difference but on a form with other inputs that might not require the same validation it is advisable to be more granular - potentially including a class for the inputs you want to specifically target.
0
 
LVL 42

Expert Comment

by:David S.
ID: 41791300
That's an "improvement," not a "correction".  However, I do agree that using just "input" as the selector certainly has the potential for undesirable results.

That specific scenario can be mitigated by using <button> elements in place of <input type="submit"> and <input type="button">.
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 41791372
That's an "improvement," not a "correction"
Granted
That specific scenario can be mitigated by using <button> elements in place of <input type="submit">
... what about  <input type="checkbox"> or <input type="radio"> <input type="file"> - there are a few cases where the general <input> would cause a problem.
0
 
LVL 42

Expert Comment

by:David S.
ID: 41791466
what about  <input type="checkbox"> or <input type="radio"> <input type="file"> - there are a few cases where the general <input> would cause a problem.
Indeed, but I did say "mitigated," not something meaning "completely avoided".
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question