I have a function that returns whether or not every text input in a form has a value.

When I first made the function it looked like this:

function checkInput(inputId) {
check = 0;          //should be 0 if all inputs are filled out
for (var i=0; i < arguments.length; i++) {   // get all of the arguments (input ids) to check
    var iVal = $("#"+arguments[i]).val();

  if(iVal !== '' && iVal !== null) {
    $("#"+arguments[i]).removeClass('input-error');
  }
  else {
    $("#"+arguments[i]).addClass('input-error');
    $("#"+arguments[i]).focus(function(){
      $("input").removeClass('input-error');
      $("#"+arguments[i]).off('focus');
    });
  check++;
  }

}

  if(check > 0) {
    return false; // at least one input doesn't have a value
  }
  else {
    return true; // all inputs have values
  }

}

This worked fine, but when I called the function I would have to include (as an arstrong textgument) the id of every input I wanted to be checked: checkInput('input1','input2','input3').

This is what I have so far:

function checkInput() {
  var inputs = $("input");
  check = 0;
    for (var i=0; i < inputs.size(); i++) {
      var iVal = inputs[i].val();

  if(iVal !== '' && iVal !== null) {
    inputs[i].removeClass('input-error');
  }
  else {
    inputs[i].addClass('input-error');
    inputs[i].focus(function(){
      $("input").removeClass('input-error');
      inputs[i].off('focus');
    });
  check++;
  }

}

if(check > 0) {
  return false;
}
else {
  return true;
}

}

When I call the function it returns this error:

Uncaught TypeError: inputs[i].val is not a function

What am I doing wrong?

I have a function that returns whether or not every text input in a form has a value.

When I first made the function it looked like this:

function checkInput(inputId) {
check = 0;          //should be 0 if all inputs are filled out
for (var i=0; i < arguments.length; i++) {   // get all of the arguments (input ids) to check
    var iVal = $("#"+arguments[i]).val();

  if(iVal !== '' && iVal !== null) {
    $("#"+arguments[i]).removeClass('input-error');
  }
  else {
    $("#"+arguments[i]).addClass('input-error');
    $("#"+arguments[i]).focus(function(){
      $("input").removeClass('input-error');
      $("#"+arguments[i]).off('focus');
    });
  check++;
  }

}

  if(check > 0) {
    return false; // at least one input doesn't have a value
  }
  else {
    return true; // all inputs have values
  }

}

This worked fine, but when I called the function I would have to include (as an arstrong textgument) the id of every input I wanted to be checked: checkInput('input1','input2','input3').

This is what I have so far:

function checkInput() {
  var inputs = $("input");
  check = 0;
    for (var i=0; i < inputs.size(); i++) {
      var iVal = inputs[i].val();

  if(iVal !== '' && iVal !== null) {
    inputs[i].removeClass('input-error');
  }
  else {
    inputs[i].addClass('input-error');
    inputs[i].focus(function(){
      $("input").removeClass('input-error');
      inputs[i].off('focus');
    });
  check++;
  }

}

if(check > 0) {
  return false;
}
else {
  return true;
}

}

When I call the function it returns this error:

Uncaught TypeError: inputs[i].val is not a function

What am I doing wrong?

• javascript
• jquery
• arrays
• input

5 Answers 5

When you do inputs[i], this returns an html element, so it is no longer a jquery object. This is why it no longer has that function.

Try wrapping it with $() like $(inputs[i]) to get the jquery object, and then call .val() like:

 $(inputs[i]).val()

If you are going to use this in your for loop, just set it as a variable:

var $my_input = $(inputs[i])

Then continue to use it within the loop with your other methods:

$my_input.val()
$my_input.addClass()

etc..

if you use jquery .each() function, you can do it a little cleaner:

$(document).ready(function() {
    $('.submit').on('click', function() {
        $('input').each(function() {
            console.log('what up');
            if($(this).val().length < 1 ) {
                $(this).addClass('input-error');
            }
            else {
                $(this).removeClass('input-error');
            }
        });
    });
});

.input-error {
    background-color: pink;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<input type="text" /><br/>
<br/>
<a href="#" class="submit">SUBMIT</a>

This is actually a very simple fix. You need to wrap you jquery objects within the jquery constructor $()

Such as for inputs[i].val() to $(inputs[i]).val();

Here is the full working example:

http://jsbin./sipotenamo/1/edit?html,js,output

Hope that helps!

This is exactly one of the things the .eq() method is for. Rather than using inputs[i], use the following:

// Reduce the set of matched elements to the one at the specified index.
inputs.eq(i)

Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set. The supplied index identifies the position of this element in the set.

in this case, I would make use of the jQuery.each() function for looping through the form elements. This will be the modified code

function checkInput() {
        var $inputs = $("input"),
            check = 0;
        $inputs.each(function () {
            val = $.trim($(this).val());
            if (val) {
                $(this).removeClass('input-error');
            }
            else {
                $(this).addClass('input-error');
                $(this).focus(function () {
                    $("input").removeClass('input-error');
                    $(this).off('focus');
                });
                check++;
            }
        });
        return check == 0;
    }