javascript - DataType.MultilineText 字段将破坏我的模式弹出部分 View 的整个验证

Question

我面临着一个非常奇怪的问题。我创建了新的 asp.net mvc5 应用程序。我将其升级到asp.net mvc-5.2.2。现在我有以下字段:-

 [Required]
 [StringLength(200)]
 public string Name { get; set; }

当我将部分 View 渲染为模态弹出窗口，并留下必填字段 emtoy 时，在尝试提交表单时会收到验证错误(这是正确的):-

但奇怪的问题是，当我将以下数据注释添加到我的模型类中时:-

 [Required]
        [StringLength(200)]
      [DataType(DataType.MultilineText)]
        public string Name { get; set; }

然后整个客户端验证将在模式部分 View 内中断。即使将“名称”字段留空(因为不会显示客户端验证错误)，我也可以提交部分 View ，但如果我删除 [DataType(DataType.MultilineText)]，我将再次进行验证。这是一个非常奇怪的问题，我不明白发生了什么......

这是负责将部分 View 显示为模式弹出窗口并验证部分 View 的脚本:-

 $(function () {
        $.ajaxSetup({ cache: false });
        $("a[data-modal]").on("click", function (e) {        
            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    keyboard: true
                }, 'show');

                bindForm(this);
            });
            return false;
        });


    });

    function bindForm(dialog) {
        $('form', dialog).submit(function () {
               var isValid = true; // assume all OK
            $('form').validate(); // perform validation on the form
              $('input[type="text"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
            if (!$(this).valid()) {
                  isValid = false; // signal errors
                     return false; // break out of loop   
                 }
             })
              if (!isValid) {
                  return false; // exit
              }
            $('#progress').show();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        location.reload();
                    } else {
                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }

我尝试在 asp.net mvc 5.0 上重现此问题，但似乎一切正常，这可能只是 mvc 5.2.2 中的问题吗？

编辑

这是弹出模式中名称字段的标记(客户端验证不起作用):-

<div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <textarea class="input-validation-error text-box multi-line" data-val="true" data-val-length="The field Name must be a string with a maximum length of 200." data-val-length-max="200" data-val-required="The Name field is required." id="Name" name="Name"></textarea> 
                <span class="field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true">The Name field is required.</span>
            </div>
        </div>

这是当我在浏览器中将其呈现为完整 View 时(客户端验证将起作用):-

<div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <textarea class="text-box multi-line" data-val="true" data-val-length="The field Name must be a string with a maximum length of 200." data-val-length-max="200" data-val-required="The Name field is required." id="Name" name="Name"></textarea> 
                <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

当我删除 [DataType.MultiLineText] 数据注释时，标记将是:-

<div class="form-group">
            <label class="control-label col-md-2" for="Name">Name</label>
            <div class="col-md-10">
                <input class="text-box single-line" data-val="true" data-val-length="The field Name must be a string with a maximum length of 200." data-val-length-max="200" data-val-required="The Name field is required." id="Name" name="Name" type="text" value=""> 
                <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
            </div>
        </div>

编辑2现在我的脚本(技能管理网格)如下所示:-

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                keyboard: false
            }, 'show');
            $("form").removeData("validator");
            $("form").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse("form");
            bindForm(this);
        });
        return false;
    });


});

function bindForm(dialog) {
    $('form', dialog).submit(function () {
          var isValid = true; // assume all OK
          if ($('form').valid()) { // perform validation on the form

              //  $('input[type="text"],input[type="textarea"]').each(function (index, item) { // could change selector to suit e.g $('input, textarea').each(..            
              //       if (!$(this).valid()) {
              //          isValid = false; // signal errors
              //           return false; // break out of loop   
              //  }
              //})
              //       if (!isValid) {
              //         return false; // exit
              //    }
              $('#progress').show();
              $.ajax({
                  url: this.action,
                  type: this.method,
                  data: $(this).serialize(),
                  success: function (result) {
                      if (result.success) {
                          $('#myModal').modal('hide');
                          $('#progress').hide();
                          location.reload();

                      } else {

                          $('#progress').hide();
                          $('#myModalContent').html(result);
                          bindForm();
                      }
                  }
              });
          }
        return false;
    });
}

我的索引 View 脚本部分是:-

@section scripts{


    @Scripts.Render("~/bundles/jqueryval") 
  <script src="~/Scripts/skillmanagementgrid.js"></script>
}

目前，如果我提交模式弹出窗口，同时将必填字段留空，脚本“if ($('form').valid())”将返回 true ？并且还会调用 return false 。但最后，即使有验证错误，模式 popp 也会被提交。我百分百困惑？你能建议一下吗？

编辑3现在我已经更新了我的代码如下:-

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {

        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                keyboard: true
            }, 'show');
            $('#myModalContent').removeData("validator");
            $('#myModalContent').removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse('#myModalContent');
            bindForm(this);
        });
        return false;
    });


});

function bindForm(dialog) {
    $('#myModalContent', dialog).submit(function () {

        if ($('#myModalContent').valid()) {
            $('#progress').show();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        //location.reload();
                        alert('www');
                    } else {

                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
     }
        else {
           return false;
   }
    });
}

现在表单验证正在工作，但是当我提交模式弹出表单时，它将发送一个正常的 http post 请求，而不是一个 Ajax post 请求...所以不知道如何让它工作，，，我需要表单验证工作正常并且脚本发送ajax post请求...你能告诉我代码里面有什么问题吗？谢谢

Answer 1

正如我从 html 标记验证中看到的那样，应该在模式弹出窗口中工作。

我认为你有问题，因为当你渲染弹出菜单时，你基本上会用ajax响应更改DOM，并且不引人注目的验证应该解析添加的html，我只能'在您的 js 中看不到它。我认为你可以这样做:

$(function () {
    $.ajaxSetup({ cache: false });
    $("a[data-modal]").on("click", function (e) {
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                keyboard: true
            }, 'show');
            // this is how you parse added DOM with form to perform validation
            // here could be just 'form' selector if you sure that you have only one form
            $.validator.unobtrusive.parse($("#myModalContent"));
            bindForm(this);
        });
        return false;
    });
});

function bindForm(dialog) {
    $('form', dialog).submit(function () {
        if ($('form').valid()) {
            $('#progress').show();
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        $('#progress').hide();
                        location.reload();
                    } else {
                        $('#progress').hide();
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
        }
        else
        {
            return false;
        }
    });
}

现在介绍[DataType.MultiLineText] 属性。我在 html 中看不到任何问题，所以我想它也应该可以工作。但我更喜欢在 View 上使用 @Html.TextAreaFor() 帮助器来渲染 textarea 而不是 Attribute 因为如果当你决定改变它时，你不介意重新构建你的项目。我想你可以在你的 View 上这样做:

@Html.TextAreaFor(x => x.Name)