Question

我正在尝试使用Bootstrap popovers for mvc validation message

我的代码是：

<form id="form-signup_v1">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <label>Amount</label>
            @Html.TextAreaFor(m => m.FirstName)
            @Html.ValidationMessageFor(m => m.FirstName, null, new { data_toggle = "popover", data_content = "Content of Popover like a simple form etc." ,data_placement= "left" })
        </div>
    </div>
    <input value="Button" type="submit">
</form>

Java脚本：

<script>
$(document).ready(function () {

    $('[data-toggle="popover"]').popover();

});
</script>

现在我收到如下错误信息

但我需要在poppover

中显示错误消息

更新1

使用开发者工具的HTML代码：

<form id="form-signup_v1">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <label>Amount</label>
            <textarea cols="20" 
                      data-val="true" 
                      data-val-required="The Amount old field is required." 
                      id="FirstName" 
                      name="FirstName" 
                      rows="2">
            </textarea>
            <span class="field-validation-valid" 
                  data-content="Content of Popover like a simple form etc." 
                  data-placement="left" 
                  data-toggle="popover" 
                  data-valmsg-for="FirstName" 
                  data-valmsg-replace="true">
            </span>
        </div>
    </div>
    <input value="Button" type="submit">
</form>

我犯了错误

谢谢.....

Answer 1

根据Bootstrap popover documentation，popover数据属性需要位于您想要弹出窗口的元素上。从生成的验证范围中获取所有数据属性并将它们放在textarea上，看看它是否有效。

到目前为止，复制数据属性不是最好的方法，但它会让你朝着正确的方向前进。

Answer 2

所以这是一个bootply示例，将您的Razor转换为HTML，就好像该字段无效一样。 http://www.bootply.com/HtIaotAZfv

相关的javascript是这样的：

    $("[data-toggle='popover']").each(function() 
      { 
        $(this).popover( {
          title: $(this).data("valMsgFor"),
          content: $(this).text()
        })
        .html("<i class='glyphicon glyphicon-question-sign text-danger'></i>");
      }
   );

这依赖于HTML帮助器将span-tag上的data-val-msg-for属性放到popover的标题上，然后定义popover的内容。

我不知道您为此设计的内容，因为您仍然拥有验证消息的全文。你可以在.popover（）的末尾附加一个对jQuery的.text（）或.html（）的调用，然后插入一个glyphicon，例如，如上所述。

如何在mvc验证消息中使用Bootstrap popovers

2 个答案: