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

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 选择器：

#txtFirstName:invalid {
   border: 2px solid red;
}

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

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

Answer 2

示例代码：-

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