document.getElementById.show() is not a function

I have a form and how it works is that when a user clicks a list item and selects a "size value", it is given a class of selected, and the user can submit the form. The part that I'm trying to figure out is that when no size is selected, and thus no list item has a class of "selected", the form won't be submitted and instead the error message would show. I'm having trouble getting this to work and the error message to show, the form still just submits. Currently I'm getting an error telling me that document.getElementById("errormessage").show() is not a function. Does anyone know why this is happening? And can anyone help me with my code to get it to work the way I want to?

Below is my html:

<form>
   <ul>
     <li>
      <ul>
       <li class="size-value"></li>
       <li class="size-value"></li>
       <li class="size-value"></li>
       <li class="size-value"></li>
     </ul>
    </li>
  </ul>
</form>
<div id="errormessage">Please select a size</div>
<div class="mt10">
   <input type="submit" class="modalAddToBagButton">
</div>

And my jQuery:

.on('click', '.modalAddToBagButton', function(e) {
            e.preventDefault();
            var x = document.getElementsByClassName("es-value");
            var i = x.length;
            var selected = false;
            while(i--) {
                if (x[i].hasAttribute("selected")) {
                    selected = true;
                }
            }
            if(selected == false) {
                //Displays error
                document.getElementById("errormessage").show();
            } else {
                $(this).closest("#dialog-addToBag").find('form').submit();
            }           
        });