Bootstrap：如何更改文本框占位符以显示 ErrorMessage？答案

【问题标题】：Bootstrap: How to change textbox placeholder to show ErrorMessage?Bootstrap：如何更改文本框占位符以显示 ErrorMessage？
【发布时间】：2016-02-03 21:44:38
【问题描述】：

我正在验证 bootstrap form input 并希望显示错误消息而不是默认占位符文本。

我该怎么做？

这是我的html：

<div class="form-group">
    <asp:TextBox CssClass="form-control" ID="txtReportYear" runat="server" placeholder="Enter Year" MaxLength="4" ClientIDMode=Static></asp:TextBox>
</div>

这是 jQuery：

function ValidateInput() {
   var year = $('#txtReportYear').val();
   var month = $('#txtReportMonth').val();
   var day = $('#txtReportDay').val();

   if (year == '') 
   {
      $('#txtReportYear').placeholder = 'Provide Year';
      return false;
   }
   return true;
}

还有其他验证表单的方法吗？

【问题讨论】：

你可以这样做： $('#txtReportYear').attr("placeholder","your error message goes here") 因为占位符只显示在空输入框中，你需要删除像这样的当前值：$('#txtReportYear').val("")
谢谢，成功了！！我怎样才能设置该错误消息的颜色？我尝试使用$('#txtReportYear').css({'color' : 'red'})，但它不起作用
刚刚更新了我对地址占位符颜色更改的答案。

标签： jquery asp.net validation twitter-bootstrap-3

【解决方案1】：

查看CODEPEN 中的工作示例。

$("#txtReportYear").val("").attr("placeholder","An error occured!");

因此，您需要使用.val("") 清除input 框中的当前值。然后您可以使用.attr("placeholder","An error occured!") 将占位符更改为新消息。如果您在变量中有错误消息，比如说err_msg，那么您可以这样做：

$("#txtReportYear").val("").attr("placeholder",err_msg);

要更改占位符的颜色，您可以创建一个新的 CSS 类并将其添加到 input 框：

CSS

.changePlaceColor1::-webkit-input-placeholder {
   color:    red;
}

.changePlaceColor2:-moz-placeholder {
   color:    red;
}
.changePlaceColor3::-moz-placeholder {
   color:    red;
}
.changePlaceColor4:-ms-input-placeholder {
   color:    red;
}

然后，你的点击事件会变成这样：

$("#txtReportYear").val("").attr("placeholder","An error occured!").addClass("changePlaceColor1").addClass("changePlaceColor2").addClass("changePlaceColor3").addClass("changePlaceColor4");

注意：您可以添加特定于供应商的占位符颜色类以使其跨浏览器工作。

【讨论】：

我更新了答案。我已经说过，您需要简单地添加特定于供应商的样式以使其能够跨浏览器工作。现在它应该可以工作了。

【解决方案2】：

我不会修改占位符，而是使用内置的 ASP.NET validators。

如果年份是必填字段，请使用：

<asp:RequiredFieldValidator runat="server" Text="Year is required" ControlToValidate="txtReportYear" DisplayMode="Dynamic" />

【讨论】：