Awkward Check - A jQuery Plugin

This article was last updated on Dec 08, 2011

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.

Download v.1.3.1 View Demo

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" checkfield="#input-name" 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" checkfield="#input-email" checkrule="email" 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" checkfield="#input-phone" checkrule="phone:empty" checkerror="Please enter a valid phone 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
The class ”input-box” MUST be included.

checkfield
The identifier of the field to validate.

checkerror (optional)
The error message to show.

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.

checklabel
The value for the overlay label.

Custom Validation Rules

Add custom validation rules (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])$/;

Known Bugs in v.1.3.1

No known bugs yet =)

If you find any bugs, or solutions on how to solve them, keep us updated. Thanks!

Changelog v.1.3.1

- A small bug fix for custom validation functions.

Upcoming Features

If you have any features you want in upcoming versions, let us know.

Changelogs

Visit our jQuery Plugin Page

3 latest releases

Awkward Check v.1.3.1
Awkward Check v.1.3
Awkward Check v.1.2

Disqus this post

Anonym

It might be helpful to mention that the class ”input-box” MUST be included for any fields you want to check. That class is what determines if a field gets checked or not. Including the ”checkfield” attribute is not sufficient.

Overall, this is a pretty slick, easy to use, and very lightweight form validator.

Thanks Awkward peeps.
Jennifer085

hello, nice script ! I need to include checkbox like this ‘name[]‘ is it possible ? can you help me to add a line for this ?
http://www.awkward.se Joakim Strandell

Why do you want do do like that?
Michael

Hello! Is there any way to adapt the validation to make sure a radio button is selected? Also, a check box that needs to be checked. I need this because I am adapting this as a registration form for our school, and we need to allow for the students to make a selection… please help… thank you so much!
http://www.awkward.se Joakim Strandell

I the new 1.2 version of the plugin it is possible to validate checkbox fields.
Michael

Thank you! It seems to work for both checkbox and radio!
Michael

Actually, upon further testing, it doesn’t work for radio buttons…. I thought I had a work-around, but it didn’t work. Looking forward to a new version where validating radio button options is available… Thanks!
Pasha

Is there any way to run ajax validation? for example I want to check in DB if email is unique
http://www.awkward.se Joakim Strandell

Sorry, not in the current version.
http://www.awkward.se Joakim Strandell

Now you can. In v.1.3 you can add functions as custom validation rules.
Pasha

awesome, exactly what I was looking for! thanks
Dallas

Got 50% into it and realized there was no validate for Selects? Would be rad to see a version that would just check for all form elements. I was sooooo happy when I found this. And sooooo bummed to find that it wouldn’t out of the box validate a select.
http://www.awkward.se Joakim Strandell

It does validate selects. Just use the text validation rule and have the ”empty” options value set like this: value=”".
Pasha

I have found a little bug with new custom validation functions. If I validate using
isValid = aw_check( ‘#form1′ );
and there is a validation function
aw_check_custom_validation['price'] = aw_check_validate_price;
isValid will return true (even though the field will be highlighted as invalid and there will be cross icon)
http://www.awkward.se Joakim Strandell

Thanks! Fixed in the new release.
Noreply at Google

Hey,

There is a typo error in the line: ”This article was last updated on Okt 05, 2011″
http://twitter.com/gethmyster Lee Gething

Would is be possible to use the custom validation to compare 2 fields – for example a 2nd email address field to match the first (already validated as an email address)?
http://twitter.com/gethmyster Lee Gething

Would is be possible to use the custom validation to compare 2 fields – for example a 2nd email address field to match the first (already validated as an email address)?
Ikenna Ugwuh

I think it’s supposed to be like that. Kre8iv and such lol
Nathan-nz

Hi, this has been really useful. Thanks!

Just one question when I try and use w3c Markup Validation Service its produces 2 errors as follows…

there is no attribute ”checkfield”

…

and

there is no attribute ”checkrule”

…

How do I fix this? We need both the checkfield and checkrule to validate the form.

Thanks

Nathan
http://www.awkward.se Joakim Strandell

Those two are not valid attributes, and there is no work-around. The reason we have structured the plugin like this is because we think that some rules for the markup validation are unnecessary due to the lack of flexibility in the HTML language. This code works fine, even of it doesn’t validate.
Serghey Sancheev

It will be really great if you add Validation if 2 fields are equal. For example 2 passwords:
Markus

Is it possible to have fields that are validated only if they are not empty?

Bra jobbat !
Markus

Found it
http://www.awkward.se Joakim Strandell

Yepp: Add :empty after a validation rule.
Scolas

for better html i suggest to use data attribute instead of directly named attribute (so checkrule became data-checkrule)

Good work!
http://twitter.com/gethmyster Lee Gething

I’ve used;

    // Add custom validation rules (checkrule) by adding regular expressions or function references to the array below
    aw_check_custom_validation['password'] = /^.{6,}$/;
    aw_check_custom_validation['email2'] = aw_check_validate_email2;
    aw_check_custom_validation['password2'] = aw_check_validate_password2;

    // Init form
    aw_check_init( ‘#form’ );
});

// @parent = Reference to the input field parent !important
// @value = The input field value !important
// @checkpassed = The array that holds each fields check state !important
function aw_check_validate_email2( parent, value, checkpassed ) {

    // Create email regular expression
    var email = $(”#form input[name=input-email]”).val();

    // Check if it’s a valid e-mail address
    if ( value == ” || value != email ) {

        // If not, print error message
        aw_check_print_error( parent, ‘Please check both emails are correct’ );

        // Push false into array if not valid !important
        checkpassed.push( false );
    }
    else {

        // If true remove error
        aw_check_hide_error( parent );

        // Push true into array if valid !important
        checkpassed.push( true );
    }
}

function aw_check_validate_password2( parent, value, checkpassed ) {

    // Create email regular expression
    var password = $(”#form input[name=input-password]”).val();

    // Check if it’s a valid e-mail address
    if ( value == ” || value != password ) {

        // If not, print error message
        aw_check_print_error( parent, ‘Passwords do not match’ );

        // Push false into array if not valid !important
        checkpassed.push( false );
    }
    else {

        // If true remove error
        aw_check_hide_error( parent );

        // Push true into array if valid !important
        checkpassed.push( true );
    }
}

It’s within a PHP script so you may find some elements have been escaped. Works great.
insomniac

Fairly new to jQuery, but is it possible to use keyup instead of checking after loss of focus? How would I swap this in?