Question

我有一个带有id：txtFirstName的文本框，还有一个RequiredFieldValidator。如果验证器无效，我该如何更改文本框边框颜色？这是我的代码：

<label class="lblForm">FirstName</label><br />
<asp:TextBox ID="txtFirstName" runat="server" placeholder="Enter First Name"></asp:TextBox><br />
<label class="lblForm valMes">
<!-- First Name Validate -->
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" Display="Dynamic" SetFocusOnError="true"
                    ErrorMessage="EnterFirstName" ControlToValidate="txtFirstName"></asp:RequiredFieldValidator>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server"
                    ErrorMessage="First name not Valis" ControlToValidate="txtFirstName" Display="Dynamic" SetFocusOnError="true"
                    ValidationExpression="[a-z]{2,10}"></asp:RegularExpressionValidator>
</label>

我尝试了很多不起作用的javascript函数..有人可以帮助我吗？

Answer 1

您可以使用:invalid和:valid像这样的选择器：

＆＃13;

#txtFirstName:invalid {
   border: 2px solid red;
}

#txtFirstName:valid {
   border: 2px solid green;
}
#txtFirstName {
   outline: none;
}

＆＃13;

<label class="lblForm">FirstName</label><br />
<input type="text" required="required" id="txtFirstName" pattern="[a-z]{2,10}">

＆＃13;

Answer 2

示例代码： -

 var sportsDescription=  $('#sportsDescription').val();
 if(sportsDescription == ''){
      $('#sportsDescription').css({ "border":"2px solid red"  });
      mandatoryFlag = true;
 }else{
      $('#sportsDescription').css({ "border": "3px solid #D2D2D2" });
 }

如果验证失败，则更改文本框边框颜色

2 个答案: