Question

在我的bootstrap模态中是一个表单。单击“提交”按钮时，验证消息错误未显示。（我打算输入/输入无效数据）。如果检测到错误，我会重新加载boostrap模式，我在控制器中执行此操作以保持模态打开。这里有不同的方法吗？我想知道为什么错误信息没有出现。

型号：

    [Display(Name="Email:")]
    [EmailAddress(ErrorMessage="Invalid Email Address!")]
    public string Email { get; set; }

查看：

    @Html.LabelFor(e => e.Email, new { @class = "control-label col-md-2" })
            <div class="col-md-2">
    @Html.EditorFor(e => e.Email, new {htmlAttributes = new { @class = "form-control", required = "required" } })

    @Html.ValidationMessageFor(model => model.Email)
    </div>

控制器：

//for submit button
            if (ModelState.IsValid)
            {
           //Proceed to Saving 
            }
           //Keep modal open to show validation message
            TempData["HasError"] = "YES";
            return RedirectToAction("Index");
 //Index action
   [HttpGet]
    public ActionResult Index()
    {   
        //send this in frontend to know if bootstrap modal will reload
        ViewBag.Status = TempData["HasError"];

            return View();                       
    }

前端/ js

        <script>
        $(function (){
        var x = '@status';
        //show the modal of registration form since there is a validation     message error
       if (x == "YES") {
       var tab = 'SignupFrm';
       $('#' + tab).addClass("tab-pane fade in active");
       $('.nav-tabs a[href="#' + tab + '"]').tab('show');
       $('#mLogin').modal('show');

        }
       })
       </script>

Answer 1

根据您的评论，您尚未包含用于客户端验证的脚本，因此第一步是包含它们（在您的jquery 2.1.4 min.js脚本之后）

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

或更好（假设您的BundleConfig.cs文件中有默认包）

@Scripts.Render("~/bundles/jqueryval")

假设您没有关闭客户端验证，那么当您单击表单的提交按钮并取消提交时，现在将显示验证错误消息（您的控制器POST方法将不会被命中）。

但是，如果恶意用户绕过它，您仍需要在服务器中处理它。目前，如果您的模型无效，则会重定向到GET方法，这意味着ModelState将丢失。相反，您需要返回视图，并确保重新打开模式，您可以添加ViewBag属性或只检查视图中的ModelState错误。你的POST方法应该是（注意我假设模型是Person.cs）

[HttpPost]
public ActionResult Index(Person model) // modify class name to suit
{
  if (!ModelState.IsValid)
  {
    ViewBag.HasErrors = true;
    return View(model);
  }
  // save and redirect
}

然后在你的脚本中

$(function () {
  if ('@ViewBag.HasErrors') {
    // display the modal
  }
)};

添加ViewBag属性的替代方法是使用以下

$(function () {
  if ('@ViewContext.ViewData.ModelState.Values.SelectMany(v => v.Errors).Any()') {
    // display the modal
  }
)};

附注：您已在文本框中添加了required = "required"，表明您需要Email。添加此属性不会为您提供服务器端验证，添加jquery验证脚本意味着它将被忽略（novalidate="novalidate"属性已添加到您的<form>元素中。删除它，然后将RequiredAttribute添加到您的属性中，以便同时获得客户端和服务器端验证。

[Required(ErrorMessage="Please enter an email address")]
[EmailAddress(ErrorMessage="Invalid Email Address!")]
public string Email { get; set; }

Answer 2

您可能想要检查生成的输入＆＃34; id＆＃34; 和（我认为）＆＃34; name＆＃34; 属性与验证的<span> ＆＃34; data-valmsg-for＆＃34; 属性匹配。
我有一个案例，我需要自定义值，因为验证消息没有在客户端上显示同样的问题，这是我的解决方案：

@Html.ValidationMessage("newMarkValue", new { @class = "text-danger" })
@Html.EditorFor(modelItem => item.NewMark, null, "newMarkValue", new { htmlAttributes = new { @class = "form-control" } })

将验证<span>呈现为：

<span class="field-validation-valid text-danger" data-valmsg-for="newMarkValue" data-valmsg-replace="true"></span>

输入，根据属性的范围属性 [范围（2,6，ErrorMessage =＆＃34;范围2 - 6。＆＃34;] 为：< / p>

<input class="form-control text-box single-line" data-val="true" data-val-number="The field NewMark must be a number." data-val-range="Range 2 - 6." data-val-range-max="6" data-val-range-min="2" data-val-required="The NewMark field is required." id="newMarkValue" name="newMarkValue" type="number" value="0">

Answer 3

我从上面尝试了一切，但似乎没有什么对我有用。我试过this，只是在我的局部视图中编写了脚本部分，一切正常。

ValidationMessageFor不会出现在boostrap模式中

3 个答案: