使用模型验证 asp.net 核心提交表单后禁用按钮

Question

如何在 asp.net 核心中提交带有模型验证的表单后禁用按钮？

代码：

                    <form action="/AddComment" method="post" id="InsertCommentForm">
                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                        <div class="form-group">
                            <input type="hidden" asp-for="ProductId" />
                            <input type="hidden" asp-for="ParentId" value="" id="reply" />
                            <input asp-for="Email" id="Email" class="form-control mrg15B" placeholder="لطـفا یک ایمیل معتبر وارد کنید">
                            <span asp-validation-for="Email" class="text-danger"></span>

                            <input asp-for="FullName" id="FullName" class="form-control mrg15B" placeholder="لطـفا نام خود را وارد کنید">
                            <span asp-validation-for="FullName" class="text-danger"></span>

                            <textarea asp-for="Text" id="Text" class="form-control mrg15B area" cols="60" rows="5" placeholder="لطفا متن پیام را وارد کنید"></textarea>
                            <span asp-validation-for="Text" class="text-danger"></span>

                            <br />
                            <input type="submit" value="ارسال" id="InsertCommentBtn" class="btn btn-warning">
                        </div>
                    </form>

我测试了几次，但如果验证模型开始工作并阻止发布表单，禁用按钮仍然存在。

谢谢

Answer 1

需要在jquery.validate.js中使用validate()方法(_ValidationScriptsPartial.cshtml中默认引用了js文件 ) 来验证表单。只有当验证通过时，按钮才会被禁用：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $("#InsertCommentForm").on("submit", function(event) {
            var validator = $("#InsertCommentForm" ).validate();
            var flag = validator.form();
            if(flag)
            {
                $('input[type="submit"]').attr('disabled',true);
            }

        });
    </script>
}

使用模型验证 asp.net 核心提交表单后禁用按钮

disabled button after submit form with model validation asp.net core

javascript

validation

jquery

asp.net-core