Why is my Javascript validation working on pc browsers, but not on phone browsers?

Question

I have a form that I'm validating. I, obviously, want the validation to work both on pc and mobile browsers. If I fill the form from a computer browser, I have no problem. When I fill the form on a phone the validation text does not update. I've tried this on 3 different Androids (SamsungA52, Google Pixel, Samsung S22) and an iPhone13.

My html is:

        <div class="form-group">
            <label for="User">User Name</label>
            @Html.TextBoxFor(m => m.AccountRequestInfo.UserName, new { placeholder = "Enter Username", @class = "form-control", @id = "UserName", @onchange = "UserCheck()" })
        </div>
        <div class="form-group">
            <div>
                <p id="Status"></p>
            </div>
        </div>

My Javascript for that field is:

    function UserCheck() {
        $('#Status').html("Checking...");
        $.post("@Url.Action("CheckUsernameAvailability", "MyController")",
            {
                userdata: $("#UserName").val()
            },
            function(data) {
                if (data == 0) {
                    $("#Status").html('<font color="Green">Available, you can take it.</font>');
                    $("#UserName").css("border-color", "Green");
                } else {
                    $("#Status").html('<font color="Red">That username is taken. Try another.</font>');
                    $("#UserName").css("border-color", "Red");
                }
            });
    }

I am sure that my UserCheck function is being hit because it changes the text of #Status to "Checking", but it will not update after that. Any help or ideas are appreciated.