Focus and Blur not working on Test Server

Question

I have Contact Us form using ASP.Net Core 6 MVC with client JQuery validation. I'm using the jquery focus and blur methods which works perfectly on localhost using VS2022 however when publishing the procject and copying the files to a test sever on windows 2012 r2 and iis 8.5 the focus and blur methods don't work.

I'm not sure why this is not working. Any help would be much appreciated.

Thanks,

@using Microsoft.AspNetCore.Mvc.Localization
@model DesSources.Models.ViewModels.Contact

@{
    Layout = "~/Views/Shared/_ContactLayout.cshtml";
    ViewData["Title"] = "Contact Us";
}

<div class="contactcontainer">
    <div class="h3 card-header">
        <label>@localizer["ContactUs"]</label>
    </div>
    <div class="ms-3">
        <form id="SendMailForm" name="SendMailForm" asp-controller="Contact" asp-action="Index" method="post" class="needs-validation" novalidate>
            <div asp-validation-summary="ModelOnly" class="mb-2 text-danger"></div>
            <div class="col-md-2 mb-3" form-group>
                <label asp-for="Name" form-label>@localizer["Name"]</label>
                <input type="text" asp-for="Name" id="Name" class="form-control form-control-sm" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
            <div class="col-md-2 mb-3" form-group>
                <label asp-for="EmailFrom" form-label>@localizer["Email"]</label>
                <input type="text" asp-for="EmailFrom" id="EmailFrom" class="form-control form-control-sm" />
                <span asp-validation-for="EmailFrom" class="text-danger"></span>
            </div>
            <div class="col-md-2 mb-3" form-group>
                <label asp-for="Subject" form-label>@localizer["Subject"]</label>
                <input type="text" asp-for="Subject" id="Subject" class="form-control form-control-sm" />
                <span asp-validation-for="Subject" class="text-danger"></span>
            </div>
            <div class="col-md-4 mb-3" form-group>
                <label asp-for="Message" form-label>@localizer["Message"]</label>
                <textarea id="Message" rows="10" asp-for="Message" class="form-control"></textarea>
                <span asp-validation-for="Message" class="text-danger"></span>
            </div>
            <div class="col-md-4">
                <label class="col-form-label">@localizer["SecurityCode"]</label>
                <dnt-captcha asp-captcha-generator-max="99999"
                     asp-captcha-generator-min="10000"
                     asp-captcha-generator-language="English"
                     asp-captcha-generator-display-mode="ShowDigits"
                     asp-use-relative-urls="true"
                     asp-placeholder="Security code as a number"
                     asp-validation-error-message= "Please enter the security code as a number.";
                     asp-font-name="Tahoma"
                     asp-font-size="20"
                     asp-fore-color="#333333"
                     asp-back-color="#FCF6F5FF"
                     asp-text-box-class="form-control"
                     asp-text-box-template="<div class='input-group input-group-sm mt-2'><span class='input-group-text'><span class='bi-lock'></span></span>{0}</div>"
                     asp-validation-message-class="text-danger"
                     asp-refresh-button-class="bi-arrow-counterclockwise btn-lg"
                     asp-show-refresh-button="true"
                     asp-dir="ltr"
             />
            </div>
            <div class="my-3">
                <button type="submit" class="btn btn-warning" id="btnSend" name="btnSend">@localizer["Send"]</button>
            </div>
        </form>
        </div col-md-12>
            <div class="alert alert-success alert-dismissible collapse text-center mx-auto" style="font-size: 2rem;" role="alert">
                @localizer["SentSuccessMsg"]
            </div>
        <div>
    </div>
</div>

@section scripts{
    <script>
        
        var inputFields = $("input:text, textarea");
        inputFields.css("border-color", "rgba(102,102,102,0.5)");

        inputFields.focus(function () {
            $(this).css("box-shadow", "0 0 0 0.2rem rgba(102, 102, 102, 0.25)").css("border-color", "rgba(102,102,102,0.5)");
        });

        inputFields.blur(function () {
            $(this).css("box-shadow", "none").show();
        });

    </script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
}

Answer 1

I was able to fix the issue by placing the jquery in the function below

$(function () {
    var inputFields = $("input:text, textarea");
    inputFields.css("border-color", "rgba(102,102,102,0.5)");

    inputFields.focus(function () {
        $(this).css("box-shadow", "0 0 0 0.2rem rgba(102, 102, 102, 
        0.25)").css("border-color", "rgba(102,102,102,0.5)");
     });

     inputFields.blur(function () {
        $(this).css("box-shadow", "none").show();
     });
});