Clone wiki

Awkward Check / Home

Welcome

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.

http://www.awkwardgroup.com/sandbox/awkward-check-a-jquery-plugin
http://www.facebook.com/awkwardgroup
http://www.twitter.com/awkwardgroup

Live Demo

http://check.awkwardgroup.com/

Download

https://bitbucket.org/awkwardgroup/awkward-check/downloads

Implementation Example

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

Configuration Options

Functions

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.
aw_check(‘#id-of-the-form-to-validate’);

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

Element Attributes

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

data-checkfield
The identifier of the field to validate.

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

data-checkrule
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.

data-checklabel
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])$/;

License

Copyright (C) 2011 Awkward Group (http://www.awkwardgroup.com)
Licensed under Attribution-ShareAlike 3.0 Unported
http://creativecommons.org/licenses/by-sa/3.0/

Have fun!

Updated