如何在 asp.net core mvc 中验证 JavaScript 创建的元素答案

【问题标题】：How to validate JavaScript created element in asp.net core mvc如何在 asp.net core mvc 中验证 JavaScript 创建的元素
【发布时间】：2021-12-13 02:18:24
【问题描述】：

我有一个包含将使用 JavaScript 生成的元素（复选框）的表单，我想检查其中是否至少有一个被选中。另外，我有一些输入，我想检查其中至少一个是否有价值。最初的问题是我编写的代码显示了错误消息，但立即提交了表单。我不能在这里使用服务器端验证，因为这些项目是通过 JS 创建的。而且我不确定是否可以使用服务器端验证来检查至少一个输入字段是否具有值。

对于这个问题，我尝试使用 e.preventDefault(); ，如果没有值或复选框未选中，它会停止提交表单，但如果有值，它仍然不会提交表单

这是我试过的代码

$(function () { 
                $("#SubmitForm-btn").click(function () {
                    $("#fupForm").submit(function (e) {
                        e.preventDefault();
                        var valid = true;
//here I'm checking if any of the input field has value.

                        $('#dataTable tbody tr td input[type=text]').each(function () {
                            var text_value = $(this).val();
                            if (!hasValue(text_value)) {
                                
                                valid = false;
                                $("#tableEmpty").html("Please Choose a Service");
                                return false;
                            }
                            else {
                                $("#fupForm").unbind('submit');
                                valid = true;
                                return true;
                                
                            }


                        })

//here I'm checking if any of the checkbox is checked.
                        $('.check').each(function () {
                            if (!$(this).is(':checked')) {
                                valid = false;
                                $("#Person_errorMSG").html("Please choose a person");
                                return false;

                            }
                            else {
                                $("#fupForm").unbind('submit');
                                valid = true;
                                return true;
                            }

                        });

//here I'm checking if any of the checkbox is checked.
                        $('.Fromcheck').each(function () {
                            if (!$(this).is(':checked')) {
                                valid = false;
                                $("#From_errorMSG").html("Please choose a City");
                                return false;

                            }
                            else {
                                $("#fupForm").unbind('submit');
                                valid = true;
                                return true;
                            }

                        });
//here I'm checking if any of the checkbox is checked.
                        $('.Tocheck').each(function () {
                            if (!$(this).is(':checked')) {
                                valid = false;
                                $("#To_errorMSG").html("Please choose a To city");
                                return false;

                            }
                            else {
                                $("#fupForm").unbind('submit');
                                valid = true;
                                return true;
                            }

                        });
                    });
                    
                });
            });

【问题讨论】：

这是我认为使用 jQuery 实际上对你造成很大伤害的情况。这是一个没有 jQuery 的更简单的函数。我试图在精神上解析正在发生的一切，而且很难理解。也就是说，如果在没有选中至少一个框的情况下无法提交表单，我认为这里的 ux 最佳实践是实际禁用提交按钮，直到至少选中一个框，这将是完全不同的代码块。

标签： javascript jquery validation asp.net-core-mvc

【解决方案1】：

您应该阻止按钮单击事件，而不是表单提交操作。

请参考以下示例代码：

在查看页面中，我们有一个mainform。

    <form id="mainform" asp-action="AddAttribute">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="AttributeId" class="control-label"></label>
            <input asp-for="AttributeId" class="form-control" />
            <span asp-validation-for="AttributeId" class="text-danger"></span>
        </div>
       ...
        <div class="form-group">
           Is Submit <input type="checkbox" class="isSubmit" />
        </div>
        <div class="form-group"> 
            <input type="submit" value="Create" class="btn btn-primary" id="SubmitForm-btn" />
        </div>
    </form>

在上述页面的最后，添加如下脚本：

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
    $(function () {
        $("#SubmitForm-btn").click(function () {
            event.preventDefault(); //prevent the default submit action.

            //check if the checkbox is checked or not.
            var ischecked = $(".isSubmit").last().is(":checked");
            if (ischecked) {
                //alert("Checked");
                //if the cleckbox checked, submit the form.
                $("#mainform").submit();
            }
            else {
                //alert("Unchecked");
                //show notification message. and the form will not submit.
            }
        }); 
    });
</script>

}

结果如下：

【讨论】：