Form will not submit and gives error message

I have a form that contains clothing sizes. When a user selects a size, they are able to submit the form.

My issue is that the user is able to submit the form whether or not they have selected a size. The code is much more complicated but below is a break down of the form, with the add to bag button below.

<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 class="mt10">
  <input type="submit" class="modalAddToBagButton">
</div>

When a user selects a size, the class selected is added, so it would read class="size-value selected". This function is working fine. In my .js file I would like to add an if/else statement, where if an <li class="size-value"> has been given the class selected (the user has clicked this size), then the form will be submitted, however if NO <li> has the class selected, the form will throw an error message. Below is the section of my function that I believe I should add the if/else statement:

}).on('click', '.modalAddToBagButton', function(e) {
  e.preventDefault();
  // Add if/else statement here. if list items have a class selected, form can be submitted. if no list items have class selected, then display this error message.
  $(this).closest("#dialog-addToBag").find('form').submit();
});

My question is: How do I write this if/else statement? I am not sure how to access the form and list items from my input button, since they are outside the div and are quite nested, and to listen for if any of the list items have been given the class selected so that the form can be submitted, and if not to throw an error message. Can anyone help with this?


UPDATE:

This function works in not submitting the form and displaying the error message when no size is selected, however even when a size is selected the error message still appears and the form will not submit. Can anyone figure out why?

.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
    $("#errormessage").show();
  } else {

    $(this).closest("#dialog-addToBag").find('form').submit();
  }
});

Answer

.on('click', '.modalAddToBagButton', function(e) {
    e.preventDefault();
    $form = $(this).closest("#dialog-addToBag").find('form');
    if( $( ".size-value.selected" ).length ) { //ho
        $form.submit();
    } else {
        $("#errormessage").show();
    }
});

Try this one