jQuery check if <input> exists and has a value

Profile picture for Dimskiy
Dimskiy

I have the following example:

<input type="text" class="input1" value="bla"/>

Is there a way to check if this element exists and has a value in one statement? Or, at least, anything shorter then

if($('.input1').length > 0 && $('input1').val() != '')

Just getting frustrated here with mile-long conditions.

You can create your own custom selector :hasValue and then use that to find, filter, or test any other jQuery elements.

<!-- language: lang-js --> 
jQuery.expr[':'].hasValue = function(el,index,match) {
  return el.value != "";
};

Then you can find elements like this:

<!-- language: lang-js --> <pre><code>var data = $("form input<b><i>:hasValue</i></b>").serialize(); </code></pre>

Or test the current element with .is()

<!-- language: lang-js --> <pre><code>var elHasValue = $("#name").is("<b><i>:hasValue</i></b>"); </code></pre> <!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-js --> 
jQuery.expr[':'].hasValue = function(el) {
  return el.value != "";
};


var data = $("form input:hasValue").serialize();
console.log(data)


var elHasValue = $("[name='LastName']").is(":hasValue");
console.log(elHasValue)
<!-- language: lang-css --> 
label { display: block; margin-top:10px; }
<!-- language: lang-html --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <label>
    First Name:
    <input type="text" name="FirstName" value="Frida" />
  </label>

  <label>
    Last Name:
    <input type="text" name="LastName" />
  </label>
</form>
<!-- end snippet -->

Further Reading: