Solved

jQuery: Select input where value length less than 5

Posted on 2016-09-08
5
46 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
  • 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 51

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 51

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now