displaying validation error message for blank field

I have a drop down list control. I want to display an empty error message if the user does not select any item in the drop down. below is the HTMl markup for the drop down because the actual drop down is in Telerik:

<div class="col-md-6">
                        <label style="font-weight:bold" class="control-label required" for="AwardId">Nominated for these Awards</label>
                        <input disabled="disabled" id="AwardName" name="AwardName" required="required" style="width:100%" type="text" value="" /><script>kendo.syncReady(function(){jQuery("#AwardName").kendoDropDownList({"autoBind":false,"cascadeFrom":"EmployeeNumber","dataTextField":"AwardCategory1","dataValueField":"AwardId","enable":false,"optionLabel":"Select award...","dataSource":{"transport":{"read":{"url":"/AdditionalInformation/Cascading_GetAwards","data":filterAwards},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}}});});</script>
                    </div>

This is the input button at the bottom of the page.

 <input type="submit" value="Submit" class="btn btn-primary"  />

I tried to display the error message this way:

<input type="submit" value="Submit" class="btn btn-primary" onclick="checkValidity()" />

<script>
      function checkValidity()
    {
        
        //const inpObj = document.getElementById("AwardName");
        //alert(inpObj);
        //if (!inpObj.checkValidity()) {
        //    document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
</script>

when I run my code and click on submit button. I dont see any error message.