Choose a skin you like

HTML:

<form accept-charset="UTF-8" action="/users" class="ajax-form" id="new_user" method="post">
  
    <div class="field" validate="name">
      <label for="user_name">Name</label><br />
      <input id="user_name" name="user[name]" type="text" />
    </div>
    <div class="field" validate="email">
      <label for="user_email">Email (can be fake)</label><br />
      <input id="user_email" name="user[email]" type="text" />
    </div>
    <div class="field" validate="password">
      <label for="user_password">Password</label><br />
      <input id="user_password" name="user[password]" type="password" />
    </div>
    <div class="field" validate="category">
      <label for="user_category">Category</label><br />
      <select id="user_category" name="user[category]"><option value=""></option>
<option value="Hipster">Hipster</option>
<option value="Geek">Geek</option></select>
    </div>
    <div class="field" validate="bio">
      <label for="user_bio">Bio</label><br />
      <textarea cols="40" id="user_bio" name="user[bio]" rows="20"></textarea>
    </div>
    <div class="indicate-error" validate="tos">
      <input name="user[tos]" type="hidden" value="0" /><input class="checkbox" id="user_tos" name="user[tos]" type="checkbox" value="1" />
      <label for="user_tos">Accept Terms and Conditions</label>
    </div>
    <div class="actions">
      <input name="commit" type="submit" value="Create User" />
    </div>
</form>

JavaScript:

$(function () {
  $.errors.format ='<div class="validation-popup"><div class="validation-message"></div><div class="arrow"></div></div>';
  $('.ajax-form').ajaxForm();
});

CSS:

.validation-active {
  position: relative;
}
.validation-active.indicate-error {
  background-color: #ffe3e3;
  border: 1px solid #e05c5c;
  border-radius: 3px;
}
.validation-popup {
  bottom: 8px;
  color: #fff;
  font-size: 11px;
  height: 16px;
  left: 237px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-indent: 16px;
  visibility: hidden;
  width: 16px;
}

select + .validation-popup,textarea + .validation-popup {
  background: none;
}

.validation-active input, .validation-active select, .validation-active textarea {
  background-color: #ffe3e3;
  border-color: #e05c5c;
}

.validation-active .validation-popup {
  opacity: 1;
  visibility: visible;
  border-radius: 6px;
}
.validation-active:hover .validation-popup {
  background: #f03333;
  top: -12px;
  display: block;
  height: auto;
  left: 0;
  line-height: 16px;
  max-height: 40px;
  overflow: visible;
  padding: 7px 10px;
  position: absolute;
  text-indent: 0;
  width: 238px;
  z-index: 10;
  bottom: inherit;
}
.indicate-error.validation-active:hover .validation-popup {
  top: inherit;
  bottom: 100%;
}
.validation-active:hover .validation-popup .arrow {
  background: url('/images/validation-error.png') 0 0 no-repeat;
  bottom: -7px;
  height: 7px;
  position: absolute;
  width: 7px;
}

.validation-message.inline {
  color: red;
}