无法在 .NET Core 中验证表单

Question

    <form id="formElem">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input asp-for="ID" type="hidden" />
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label asp-for="Name" class="control-label"></label>
                <input asp-for="Name" required class="form-control" />
                <span asp-validation-for="Name" class="text-danger"></span>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label asp-for="Description" class="control-label"></label>
                <textarea asp-for="Description" required rows="5" class="form-control"></textarea>
                <span asp-validation-for="Description" class="text-danger"></span>
            </div>
        </div>

        <div class="col-sm-6">
            <div class="form-group">
                <label asp-for="ImageData" class="control-label"></label>
                <input asp-for="ImageData" type="file" class="form-control" />
                <span asp-validation-for="ImageData" class="text-danger"></span>
            </div>
        </div>
    </div>




    <div class="form-group  col-sm-3">
        <input type="submit" id="dataSend" name="btn" value="Save" class="btn btn-primary" />
    </div>
</form>

JS：

        $("#dataSend").on('click', function (e) {
        e.preventDefault();

        var formData = new FormData();
        formData.append('ImageData', $('#ImageData')[0].files[0]);

        formData.append('ID', document.getElementById('ID').value);
        formData.append('Name', document.getElementById('Name').value);
        formData.append('Description', document.getElementById('Description').value);
        formData.append('btn', 'Save');

        $.ajax({
            contentType: false,
            processData: false,
            type: 'POST',
            url: '/Products/AddProduct',
            data: formData,
            success: function (response) {

                window.location.href = "/Products/Index";
            },
            error: function () {
                console.log("error.");
            },
        });
    });

当我点击保存按钮时，它直接调用AddProduct 操作，尽管所有表单字段都是空白的。我的问题是，尽管模型类中的 Name 和 Description 字段上有 [Required] 注释，为什么我的模型没有得到验证。当我使用 JavaScript 时会发生这种情况。

另外，我使用了jquery.validate.unobtrusive.min.js 和jquery.validate.min.js 文件。

Answer 1

e.preventDefault(); 也会阻止表单验证。要在不提交表单的情况下检查验证，请使用 valid()。如果错误为$("#formElem").valid() is not a function.，请检查是否包含jquery.validate.min.js。

作为

$("#dataSend").on('click', function (e) {
    e.preventDefault();

    $("#formElem").valid();
    ...

在您的 AddProduct 方法中，您是否检查了模型状态？比如

if (!ModelState.IsValid)
   {
     //Don't add product
     // return page();
  }