如果驗證失敗，則更改文本框邊框顏色

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" }); 
}