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: 
To add a class to an element:

```js
document.getElementById("MyElement").className = "MyClass";
```

To add an additional class to an element:

```js
document.getElementById("MyElement").className += " MyClass";
```

To remove a single class to an element, without affecting other potential classes, a simple regex replace is required:

```js
document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* code wrapped for readability - above is all one statement */
```

Refer this is related with this case

**[Change an element's class with JavaScript](https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript)**
```
<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();
document.getElementById("mail").style.border="3px solid red "; // add this line to add red border on error
return false;
}
else {
document.getElementById("mail").style.border="none"; // add this line to remove border on success

}
        }
    </script>

```