Uncaught TypeError with undefined in javascript

This is happening because the jQuery object is probably empty.

Let's just go through your code step by step:

var varId = $("#someInputId");

So after this, you have a jQuery object referenced by varId. Keep in mind, this is a jQuery object, regardless of the number of elements that were returned. Now you do this:

if (typeof varId !== "undefined" && varId.val().length == 0)

First thing here, and not sure if this was just a typo in the question, !== should be !=.

Anyway, consider the typeof varId != "undefined" part of the condition. This will return true, since varId is an object and is not undefined. Since this is true, the condition evaluation moves on to the next part. So while evaluating varId.val().length == 0, you're getting the error Uncaught TypeError: Cannot read property 'length' of undefined. In order for something to have the length property, it must be a string or an array, and val() in jQuery returns a string, or an array in the case of a multiple select input. However, if the jQuery object is empty, then val() will return undefined, which doesn't have a length property.

So basically, you can rewrite the expression as follows:

if ( varId.length && varId.val().length === 0 ) {
  // Do something
}

Where varId is id of input element that may be or not in the ntml page.

If the can be that the element does not exist, then you have to check whether the jQuery object contains any elements:

if (varId.length && ...) {

$ will always return a jQuery object, even if it didn't select any elements (and thus will never be undefined). But calling .val on an empty selection will return undefined.

Also make sure that you are executing the code after the DOM is ready. Please read the jQuery tutorial "How jQuery Works" to learn how to do this.

Try this

   if ($("#someInputId").val()!= undefined &&
           $("#someInputId").val().length == 0)

You are attempting to take the length of undefined (i.e., undefined.length), which is what is throwing the 'Uncaught TypeError' error.

Clearly, $("#someInputId") is undefined or returns no results. Most likely, $("#someInputId") returned no results, and the value of an empty set is undefined.

Your conditional check reaches the second clause because $() will always instantiate a jQuery object. But if the jQuery object is empty, its value will be undefined.

To avoid this error, you need to check that your query returns a result:

var varId = $("#someInputId");
if (varId.length > 0 && varId.val().length === 0) {

That conditional will be true if #someInputId exists and has a value of 0.

There is onlu in jQuery a val() function.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<input id="varId" value="varIdValue" />
<p id="output"></p>
<script type="text/javascript">
  var varId = $("#varId");
  var output = $("#output");
  output.html((typeof varId == "undefined") + ' ' + varId.val() + ' ' + varId.val().length);
</script>  

Output will be: false varIdValue 10

If you not use jQuery, then you must use value property like this:

var varId = document.getElementById('varId');
var output = document.getElementById('output');
output.innerHTML = (typeof varId == "undefined") + ' ' + varId.value + ' ' + varId.value.length;  

And output wil be the same: false varIdValue 10

EDIT

var varId = document.getElementById('doesntExist');
var varIdIsObject = (typeof varId == "object");

varId will be null and varIdIsObject will be true

But in jQuery:

var varId = $('#doesntExist');

varId will be jQuery Object with 2 fields: context (HTMLDocument) and selector (in our variant is '#doesntExist').