Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body>
  <div class="container validate-controls-always">
  <div class="form-group">
    <input class="form-control" id="para1" value="Hello, world!"><br>
  </div>
    <div class="form-group">
  <input class="form-control" id="para2" value="Hello, world!"><br>
  </div>
  <div class="form-group">
    <input class="form-control" id="para3" value="Hello, world!"><br>
  </div>
  <button id="blinker">blink</button>
  </div>
</body>
</html>
 
.validate-controls-always input.invalid {
  color: #cc2222;
  border-color: #cc2222;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(204, 34, 34, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(204, 34, 34, 0.6);
}
​
.valid {
  color: blue;
}
​
input::-ms-clear, input::-ms-reveal {
  display: none;
}
 
function hasClass(element, selector) {
  if (!element.getAttribute) return false;
  return ((" " + (element.getAttribute('class') || '') + " ").replace(/[\n\t]/g, " ").
      indexOf( " " + selector + " " ) > -1);
}
​
function removeClass(element, cssClasses) {
  if (cssClasses && element.setAttribute) {
    cssClasses.split(' ').forEach(function(cssClass) {
      element.setAttribute('class', (
          (" " + (element.getAttribute('class') || '') + " ")
          .replace(/[\n\t]/g, " ")
          .replace(" " + cssClass.trim() + " ", " ")).trim()
      );
    });
  }
}
​
function addClass(element, cssClasses) {
  if (cssClasses && element.setAttribute) {
    var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ')
                            .replace(/[\n\t]/g, " ");
​
    cssClasses.split(' ').forEach(function(cssClass) {
      cssClass = cssClass.trim();
      if (existingClasses.indexOf(' ' + cssClass + ' ') === -1) {
        existingClasses += cssClass + ' ';
      }
    });
​
    element.setAttribute('class', existingClasses.trim());
  }
}
​
function blinkE(elm) {
  // Simulate adding a new control which is initially invalid, and then
  // subsequently re-validated. Th
  var x, i;
  addClass(elm, 'invalid');
  for(i=0; i<10000000000; ++i) x += i*1000;
  removeClass(elm, 'invalid');
  for(i=0; i<10000000000; ++i) x += i*1000;
  addClass(elm, 'valid');
  return x;
}
​
function blink() {
  blinkE(para1);
  blinkE(para2);
  blinkE(para3);
}
​
blinker.addEventListener('click', blink);
​
blink();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers