来自DTO的数据注释未在视图中验证

我正在使用带有样板框架的.NET核心，并且在客户端数据验证方面遇到了麻烦 . 据我所知，DTO中使用的数据注释是在服务器端验证的 . 我正在寻找一种方法来进行客户端验证，我想我可以通过在我的视图模型中创建该DTO的对象并使用视图模型验证来使用它，就像我习惯使用.NET一样核心 .

What I Am Trying to Do:

我正在尝试使用DTO中的数据注释在我的表单中进行数据验证 . 我的视图模型包含一个DTO对象作为属性，并使用它的形式 . 似乎它进行验证，因为它不会提交，直到一切正确，但是，它不会显示任何验证，除了验证电子邮件输入;而且我不确定它为什么要用电子邮件做其他事情 .

这是我的观点

<form asp-action="AddEmergencyContactPost" method="post" id="addEmergencyContactForm" role="form">
<div class="row clearfix">
  <div class="col-sm-12">
    <div class="form-group form-float">
      <div class="form-line">
        <input asp-for="EmergencyContact.PhoneNumber" type="tel" class="validate form-control">
        <label asp-for="EmergencyContact.PhoneNumber" class="form-label"></label>
        <span asp-validation-for="EmergencyContact.PhoneNumber" class="text-danger"></span>
      </div>
    </div>
  </div>
</div>
</form>

这是我的DTO属性以及视图模型如何使用该对象

//DTO property
[Required]
[StringLength(10, MinimumLength = 10, ErrorMessage = "Invalid Phone Number")]
public string PhoneNumber { get; set; }

//View Model
public CreateEmergencyContactDto EmergencyContact { get; set; }

这是处理请求的JavaScript

$("#addEmergencyContactForm").on("submit",
        function (e) {
            e.preventDefault();
            debugger;
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (data) {
                    if (data.result === "success") {
                        swal({
                            title: "Emergency Contact Added",
                            icon: "success"
                        }).then(function () {
                            location.reload();
                        });

                    } else {
                        swal({
                            title: "Please Enter the Correct Type of Data",
                            icon: "warning"
                        }).then(function () {
                            location.reload();
                        });
                    }
                    _$modal.modal("toggle");
                }
            });
        });

What I've Tried So Far:

到目前为止我've tried adding a type to the tag helper of ' tel'并返回视图，如果模型状态无效 . 我还尝试在View Model中制作对象，但是只为所有字段设置了必需的标记（并且由于某种原因，一次只对一个字段进行验证） . 下面是一个显示电子邮件如何验证但没有任何内容的GIF .

我也尝试过使用jquery验证，但每当我测试表单是否有效时，无论如何都会返回true . 我也尝试显式设置验证标志，但后来我得到一个错误

这是我用来添加显式验证的代码 .

$(this).validate({
                rules: {
                    EmergencyContact.PhoneNumber: {
                        required: true,
                        minlength: 10,
                        phoneUS: true
                    }
                },
                messages: {
                    EmergencyContact.PhoneNumber{
                    required: "Please Enter A Phone Number",
                    phoneUS: "Please Enter A Valid Phone Number",
                    minLength: "Please Enter A Valid Phone Number"

                }
            }
        });

那么，有没有办法用这些数据注释助手进行客户端验证？如果不是最简单的方法，我的表单的客户端验证是否包含在我的索引中，而不是部分？提前感谢您提供任何帮助 .

EDIT ：这是我在样板文件中使用的启动模板