Best practice to add error handling for hidden fields in web form

Once again I am doing maintenance on a webapplication I did not build. And as always the code is: sub-optimal. Which is a huge understatement.

In this case the user needs to select other users:

Then a popup modal appears and you can select a user. After selection the displayname is shown in the input field, like 'Simpson, Bart'

But in fact there is a hidden input field that holds the actual UserID of Bart Simpson: '31337'

They put a validator on this hidden field:

<input name="LeadPartnerUserID" id="LeadPartnerUserID" type="hidden" data-val-number="The field LeadPartnerUserID must be a number." data-val="true" value=""></input>

They added a button, that shows a popup modal stating the data is being saved. While in fact nothing is being saved, because you return to the page, the modal is gone, submit was cancelled because of validation errors. But the nasty thing is: when the form is submitted, you do not see these validation errors, because those fields are hidden.

How do I show the user that data is missing, that something went wrong? Because the data: the selected user name is on screen. The user is not even supposed to know about hidden fields containing UserID's.

I am sure some of you have been in this situation before, what is the best practice to deal with this scenario?

I am talking about adding the correct Errorhandling. Of course I can just fix the Jquery code, to fill the inputfields, but that is not my question. My question is about adding correct error handling in this particular situation. Alas I have seen many similar situations in the past, I just fixed the code, but never added correct errorhandling. I feel adding errorhandling is not luxury. It is part of a good application.