Question

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

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

当我将局部视图渲染为模态弹出窗口，并且我留下一个必需的字段emtoy时，我会在尝试提交表单时得到验证错误（这是正确的）： -

enter image description here

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

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

然后整个客户端验证将在模态局部视图内部中断。即使将Name字段留空（因为不会显示客户端验证错误），我也能够提交局部视图，但是如果我删除[DataType（DataType.MultilineText）]，我将再次进行验证。这是一个非常奇怪的问题，我无法理解发生了什么......

这是负责将局部视图显示为模态弹出窗口的脚本。用于验证部分视图： -

 $(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>

虽然这里是我在浏览器中将其作为完整视图呈现（客户端验证将起作用）： -

<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>

EDIT2 现在我的脚本（skillmanagementgrid）看起来如下： -

$(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;
    });
}

我的索引视图脚本部分是： -

@section scripts{


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

目前，如果我提交模态弹出窗口，同时将所需字段留空，则脚本＆＃34; if（$（＆＃39; form＆＃39;）。valid（））＆＃34;会回归真的吗？并且还将调用return false。但最后，即使模式popp有验证错误，也会提交。我100％困惑？你可以请求吗？

编辑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请求...所以不确定如何使这个工作,,,我需要两种形式的验证工作＆amp;还要让脚本发送ajax post请求...你可以在我的代码中找到错误吗？感谢

Answer 1

我可以从html标记中看到，验证应该在模态弹出窗口中有效。

我认为你有问题，因为当你渲染弹出菜单时，你基本上用你的ajax响应改变 DOM 而不显眼的验证应该解析添加的html，我就可以＆＃ 39;在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中看到任何问题，所以我认为它也应该有效。但我更倾向于使用@Html.TextAreaFor()上的View帮助来呈现textarea而不是Attribute因为如果您决定更改它，则不要注意缩减您的项目。您可以在View我想这样做：

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

DataType.MultilineText字段将破坏我的模态弹出局部视图的整个验证

1 个答案: