VoiceOver interrupts my description when announcing "invalid data"

Question

I'm trying to work on a simple accessible form. It has a field for the user to input their full name.

<form onsubmit="validate()">
  <label for="full-name">
    <p>Full name</p>
    <input type="text" id="full-name" required aria-describedby="full-name-error">
    <em id="full-name-error" class="error">Enter your full name</em>
  </label>
  <button type="submit">Submit</button>
</form>

<script>
function validate() {
  var $label = $('label');
  var $input = $('#full-name');

  if ($input.val().length === 0) {
    $label.addClass('has-error');
    $input.attr('aria-invalid', true);
    $input.focus();
  }
}
</script>

<style>
.error {
  display: none;
}

.has-error .error {
  display: block;
}
</style>

Something seems to go wrong w/ VoiceOver on iOS with this code when I manually test it. The focus does move to the full name input but VoiceOver's announcement of "Invalid data" interrupts the error message, except sometimes it doesn't and actually works like it's supposed to? It's very strange. It will announce something like Enter yo— Invalid data., so the message is definitely getting interrupted. In other instances, it announces the entire message. I've tried programmatically setting the aria-describedby w/ JS and using aria-live on the em instead but I'm getting the same problem. Not sure if I'm doing something wrong or whether this is peculiar to VO.