Question

我正在验证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;
}

是否有其他方式来验证表单？

Answer 1

查看CODEPEN中的工作示例。

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

因此，您需要使用input清除.val("")框中的当前值。然后，您可以使用.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");

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

Answer 2

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

如果年份是必填项目：

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

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

2 个答案: