Question: I have validating the email text box. while it first time focus, the border of the text box border will be green color. if we enter the invalid mail id it will alert the user to enter the correct mail id. now the cursor will focus the text box, this time i want the text box border should be red and border width should be 3px. once the the correct valid id enter the border should disappear.

This is my Code

```
<html> 
<head> 
<title>untitled</title>
<script type="text/javascript" language="javascript"> 
    function Validate() {

var str=document.forms["register"]["requiredEMAIL"].value;
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if (!filter.test(str))
{
alert("Please input a valid email address!");
document.forms["register"]["requiredEMAIL"].focus();
return false;
}
    }
</script>
<style>
#mail{ 
 font-size:14px; 
 min-width:250px;
 border-width:2px;
 border-color:#cccccc; 
 border-style:solid;
 padding:5px;
 border-radius:5px;
 box-shadow: 1px 0px 13px 0px rgba(42,42,42,.24);  } 
 #mail:focus{border-color:#63C6AE; border-width:3px; } 
 </style> 
 </head> 
 <body>
<form method="post" action="abcd.abc.abc" onSubmit="return Validate(this)" name="register">
<input type="email" name="requiredEMAIL" id="mail" >
<input type="submit">
</form>
</body> 
</html> 

```

Answer: 
Add and Remove css class,

```
<script type="text/javascript">

$("#addClass").click(function () {
  $('#para1').addClass('highlight');
});

$("#removeClass").click(function () {
  $('#para1').removeClass('highlight');
});

</script>

```
Look over the [jQuery addClass() Method](http://www.w3schools.com/jquery/html_addclass.asp) and [jQuery removeClass() Method](http://www.w3schools.com/jquery/html_removeclass.asp)

Hope it helps.