Clone wiki

Awkward Check / Home


Awkward Check is an easy to implement jQuery plugin that makes it super easy to implement validation of HTML-forms. It has many useful features. One is real-time validation, which means that a field is validated as soon as it’s loses focus. Another one is custom validation rules which opens up for ajax based validations.

The look of the validation is 100% customizable via HTML and CSS.

Live Demo


Implementation Example

<!DOCTYPE html>
<title>Awkward Check - Demo #1</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">jQuery( document ).ready(function() { aw_check_init('#form'); });</script>
<form id="form" method="post">
    <div class="input-box" data-checkfield="#input-name" data-checkrule="text">
        <input type="text" id="input-name" name="input-name" />
        <span class="check"></span>
        <span class="error"></span>
    <div class="input-box" data-checkfield="#input-email" data-checkrule="email" data-checkerror="Please enter a valid e-mail address">
        <input type="text" id="input-email" name="input-email" />
        <span class="check"></span>
        <span class="error"></span>
    <div class="input-box" data-checkfield="#input-phone" data-checkrule="phone:empty" data-checkerror="Please enter a valid number">
        <input type="text" id="input-phone" name="input-phone" />
        <span class="check"></span>
        <span class="error"></span>
    <div class="input-box">
        <input type="submit" name="submit" value="Submit form" onclick="javascript: return aw_check('#form');" />

Configuration Options


aw_check_init( identifier, auto );

Run this, in the jQuery-document-ready-function, to initialize the form validation. The function takes two parameters:

  • identifier (string) Identifier of the form to validate.
  • auto (bool) Activate real-time validation.

Run this when clicking the submit button. If the form do not validate the function returns the value false.

Element Attributes

A wrapping element with the class ”input-box” MUST be included.

The identifier of the field to validate.

data-checkerror (optional)
The error message to show.

The validation rule for the field. text, email, check, phone, number and custom rules

Add :empty if it’s an optional field that you want validated.

The value for the overlay label.

Custom Validation Rules

Add custom validation rules (data-checkrule) by adding regular expressions or functions to the array named aw_check_custom_validation.

aw_check_custom_validation['time'] = /^([0-1][0-9]|[2][0-3]):([0-5][0-9])$/;


Copyright (C) 2011 Awkward Group (
Licensed under Attribution-ShareAlike 3.0 Unported

Have fun!