how to add and remove css class in javascript function

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>

in jquery `$('selector').toggleClass('new-class')` will work — Suman KC, Jun 30 '15 at 05:48
please check this answer [Remove and add css class using javascript](http://stackoverflow.com/a/33434902/2466310) — thejustv, Oct 30 '15 at 11:28

score 2 · Answer 1 · edited May 23 '17 at 11:52

To add a class to an element:

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

To add an additional class to an element:

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

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

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

score 2 · Accepted Answer · edited Jun 30 '15 at 07:47

2

Add and Remove css class,

<script type="text/javascript">

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

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

</script>

edited Jun 30 '15 at 07:47

Arulkumar

12,966
14
47
68

answered Jun 30 '15 at 06:06

GS Bala

390
1
11

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

Look over the jQuery addClass() Method and jQuery removeClass() Method

Hope it helps.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 30 '15 at 05:52

VBMali

1,360
3
19
46

score 0 · Answer 4 · answered Jun 30 '15 at 06:01

0

add this to your js $("#mail").addClass("intro"); on success and import jquery library

in your css add this

.intro
{
border:red;
border-width:3px;
}

answered Jun 30 '15 at 06:01

Richard Elite

720
5
15

score 0 · Answer 5 · answered Jun 30 '15 at 06:18

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

score 0 · Answer 6 · answered Jun 30 '15 at 07:14

Hi Vijay you can use this email validation form its very easy to implement

 jQuery.validator.setDefaults({
      debug: true,
      success: "valid"
    });
    $( "#myform" ).validate({
      rules: {
        field: {
          required: true,
          email: true
        }
      }
    });

#field{margin-left:.5em;float:left;}

#field,label{float:left;font-family:Arial,Helvetica,sans-serif;font-size:small;}

br{clear:both;}input{border:1px solid black;margin-bottom:.5em;}

input.error{border:1px solid red;}

label.error{background:url('http://jqueryvalidation.org/files/demo/images/unchecked.gif') no-repeat;padding-left:16px;margin-left:.3em;}

label.valid{background:url('http://jqueryvalidation.org/files/demo/images/checked.gif') no-repeat;display:block;width:16px;height:16px;}

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

<form id="myform">
  <label for="field">Required, email: </label>
  <input class="left" id="field" name="field">
  <br/>
  <input type="submit" value="Validate!">
</form>

Thanks

how to add and remove css class in javascript function

6 Answers6