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>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  .formItem{
    margin-bottom:50px; 
  }
  .formItem label{
    display:block;
  }
  
  .formError input{
    border-color:red; 
  }
  .formError label{
    color:red; 
  }
  
  .errorMsg{
    position:absolute;
    display:none;
    border:1px solid red;
    padding:5px;
    color:red;
    background-color:#FFF5F5;
    max-width:150px;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:rgba(0,0,0,0.5) 0 2px 10px;
    -moz-box-shadow:rgba(0,0,0,0.5) 0 2px 10px;
    -webkit-box-shadow:rgba(0,0,0,0.5) 0 2px 10px;
  }
  .formError .errorMsg{
    display:block; 
  }
</style>
</head>
<body>
  
  <h3>All fields must be filled in. If you leave a field, it will show an error message</h3>
  <h5>Webkit browsers will not position the hidden error message correctly, but once it has been shown you can try again and the poisition will be correct</h5>
  
  <div class="formItem">
    <label>first name</label>
    <input type="text" />
    <div class="errorMsg">Your first name cannot be blank!</div>
  </div>
  
  <div class="formItem">
    <label>last name</label>
    <input type="text" />
    <div class="errorMsg">Your last name cannot be blank!</div>
  </div>
  
  <div class="formItem">
    <label>email</label>
    <input type="text" />
    <div class="errorMsg">Your email address cannot be blank!</div>
  </div>
  
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers