CODEWITHSUNDEEP
javascriptcssvalidation
shahar shukrun
shahar shukrun

Reputation: 25

changing text box border color if validation is failed

I have a text box with the id : txtFirstName, and a RequiredFieldValidator to it. How can i change the textbox border color if the validator is not valid? Here is my code:

<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>

I tries many javascript functions that didn't work.. can someone help me?

Upvotes: 1

Views: 3440

Answers (2)

Arun Sudhakaran
Arun Sudhakaran

Reputation: 2405

Sample code :- 

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

Upvotes: 0

Ehsan
Ehsan

Reputation: 12951

you can use :invalid and :valid Selectors Like This :

#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}">

Upvotes: 1

Related Questions