jquery validate plugin- required validation doesn't work as it should

Question

I use jquery validate plugin. One of my demand is to show the error message when the field lost it focus.

 rules: {
            firstName: {
                required: true,
                //minlength: 1,
                maxlength: 30
            },
            lastName: {
                required: true,
                //minlength: 1,
                maxlength: 30
            }
        },
        messages: {
            firstName: {
                required: "Please enter your first name",
                maxlength: "Please enter a value less than or equal to 30."

            },
            lastName: {
                required: "Please enter your last name",
                maxlength: "Please enter a value less than or equal to 30."
            }       
        }

 <div class="inline ui-grid-a">
                                    <div class="firstInput ui-block-a">
                                        <input type="text" class='signup-input first-name lettersOnly required' name="firstName" id="firstName" placeholder="" required value="${user?.firstname}">
                                    </div>
                                    <div class="secInput ui-block-b">
                                        <input type="text" class='signup-input last-name lettersOnly required' name="lastName" id="lastName" placeholder="" required value="${user?.lastname}">
                                    </div>
                                    </div>

The maxlength for example works as expected , but the required start to work on focus out only if some validation happened before.