jQuery同步输入值表单提交时丢失，如何保留Username值？

我用以下jQuery代码同步StaffNumber输入框的值到Username输入框：

$(document).ready(function () {
    $('#StaffNumber').on('keyup', function () {
        var staffNo = $(this).val();
        $('#Username').val('EMP' + staffNo);
    });
});

执行这段代码后，页面上的Username输入框能正常显示填充的新值，但表单正常提交时却无法获取该值；同时Username的必填字段验证在提交时仍会触发，哪怕已经通过jQuery事件为它填充了值。我试过绑定input事件、keyup+paste组合事件，问题依然存在。

补充： 阻止表单默认提交行为后，Username的值可以被正常获取到。

以下是验证该补充方案的代码示例：

JavaScript代码 #

$(document).ready(function() {
  $('#StaffNumber').keyup(function() {
    $('#Username').val('EMP' + $('#StaffNumber').val());
  });
});

document.getElementById('testForm').addEventListener('submit', function(event) {
  event.preventDefault();

  var staffNumber = document.getElementById('StaffNumber').value;
  var username = document.getElementById('Username').value;

  console.log('Submitted Form Values: Staff#:' + staffNumber + ' Username:' + username);
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery input synch</title>
</head>
<body>
  <form id="testForm">
    <label for="StaffNumber">Staff#</label><br>
    <input type="text" id="StaffNumber" name="StaffNumber" value=""><br>
    <label for="Username">Username</label><br>
    <input type="text" readonly="readonly" id="Username" name="Username" value=""><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

现咨询：如何在正常提交表单时保留Username的值？

内容的提问来源于stack exchange，提问作者Shaheed Muhammad