How to lock page while loading data correctly

In my ASP.NET Core MVC project when the user fills the form and hits send button, a message is shown to the user and the button is locked. The problem is even without filling the form on hitting the button it shows the message. I know I should check if every input field value is not null and then on hitting the button the message is to be shown, But I don't know how to implement that? Any suggestion? Here is my code

<form method="post">
--------a few input fields in a form-------
 <button id="button" type="submit" class="btn btn-lg btn-success">send</button>
</form>
<div class="submit-progress d-none">
    <label>be patient please...</label>
</div>
@section scripts{
    <partial name="_ValidationScriptsPartial" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.2.7/js/fileinput.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#button").click(function () {
            $(this).prop("disabled", true);
            $(".submit-progress").removeClass("d-none");
        });
    </script>
}