jQuery Cannot read property 'toLowerCase' of undefined
<p>I am reading a chapter from PHP Ajax Cookbook. Here is the code:</p>

<p>HTML:</p>

<pre><code>    &lt;form class='simpleValidation'&gt;
        &lt;div class='fieldRow'&gt;
            &lt;label for='title'&gt;Title *&lt;/label&gt;
            &lt;input type='text' id='title' name='title' class='required'&gt;
        &lt;/div&gt;
        &lt;div class='fieldRow'&gt;
            &lt;label for='url'&gt;URL&lt;/label&gt;
            &lt;input type='text' id='url' name='url' value='http://'&gt;
        &lt;/div&gt;
        &lt;div class='fieldRow'&gt;
            &lt;label for='labels'&gt;Labels&lt;/label&gt;
            &lt;input type='text' id='labels' name='labels'&gt;
        &lt;/div&gt;
        &lt;div class='fieldRow'&gt;
            &lt;label for='textarea'&gt;Text *&lt;/label&gt;
            &lt;textarea id='textarea' class='required'&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;div class='fieldRow'&gt;
            &lt;input type='submit' id='formSubmitter' value='Submit'&gt;
        &lt;/div&gt;
    &lt;/form&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$(document).ready(function() {      
        var timerId  = 0;

        $('.required').keyup(function() {
            clearTimeout(timerId);

            timerId = setTimeout(function() {
                ajaxValidation($(this));
            }, 200);
        });
    });

    var ajaxValidation = function (object) {
            var $this   = $(object);
            var param   = $this.attr('name');
            var value   = $this.val();

            $.get(
                'inputValidation.php',
                {'param' : param, 'value' : value },
                function (data) {
                    if (data.status == 'OK') {
                        validateRequiredInputs();
                    } else {
                        $this.addClass('failed');
                    }
                },
                'json'
            );

            var validateRequiredInputs = function() {
                var numberOfMissingInputs = 0;

                $('.required').each(function(i) {
                    var $item = $(this);
                    var itemValue = $item.val();

                    if (itemValue.length) {
                        $item.removeClass('failed');
                    } else {
                        $item.addClass('failed');
                        numberOfMissingInputs++;
                    }
                });

                var $submitButton = $('#formSubmitter');

                if (numberOfMissingInputs &gt; 0) {
                    $submitButton.prop('disabled', true)
                } else {
                    $submitButton.prop('disabled', false)
                }
            }
        }
</code></pre>

<p>PHP (inputValidation.php):</p>

<pre><code>&lt;?php
$result = array();

if (isset($_GET['param'])) {
    $result['status'] = 'OK';
    $result['message'] = 'Input is valid!';
} else {
    $result['status'] = 'ERROR';
    $result['message'] = 'Input IS NOT valid';
}

echo json_encode($result)
?&gt;
</code></pre>

<p>When I start typing in the <code>Title *</code> field I get the following error from the console: <code>Uncaught TypeError: Cannot read property 'toLowerCase' of undefined</code></p>

<p>Note: I am using jQuery 2.2.1</p>

<p>So far I have checked the code for mis-spelling but cannot find any.</p>