Question

I am reconfiguring a complicated HTML document with 100+ input elements. I’d like to quickly find any elements that either have a blank id (<input type="text" name="something" id="" ...), an id with only whitespace (<button name="unimportant" id=" "...), or no idea at all (<select name="whatever"> so that I can make the necessary corrections to the source.

I know that the selector for blank id would be $('[id=""]'), but how can I get all the target elements with one selector (or concatenated selectors)?

Example HTML:

<form id="provision">
  <input type="text" name="something" id="" value="blank id" /><br />
  <input type="text" name="something2" value="no id" /><br />
  <select name="something3"><option>No id</option></select><br />
  <textarea name="something4" id="">Blank id</textarea><br />
  <button name="something5" id=" ">whitespace id</button><br />
  <button name="something6" id="  ">extra whitespace id</button><br />
  <label><input type="radio" name="something7" id="
">Carriage return id</label>
</form>

Please see http://jsfiddle.net/jhfrench/VNdL6/ for an example that adds red borders (.css('border-color', 'red')).

Answer 1

You can use filter() to filter out element with blank ids or ids consists of spaces. You can apply the complex filters according to your need in filter function.

$(':input').filter(function(){
     if($.trim(this.id).length == 0)
           return $(this);
}).css('border-color', 'red')