Fork me on GitHub

Debugger

The jQuery.validVal plugin makes it really easy to validate the most comprehensive forms. Unfortunately, it can also be pretty difficult to understand why a form didn't validate. Especially when some fields are hidden or disabled.
At this point, the default message "Attention, not all the fields have been filled out correctly." doen't help much either.
This is where the debugger-tool comes to the rescue.


1. Include .js-files.
First, include the debugger.js-files inside the <head>-tag of the page. It is included in the download-pack.

<script src="jquery.validVal-debugger.js" type="text/javascript"></script>

VERY IMPORTANT!
Don't forget to remove the script before your site goes live!



2. Fire the debugger.
After you've fired the validVal plugin, fire the debugger on the same element.
Set the addButton option to false if you don't want the default "validate"-button appended to the form.

$(document).ready(function() {
	$("#myForm").validVal();
	$("#myForm").validValDebug( addButton );
	
	//	or chained together:
	$("#myForm").validVal().validValDebug( addButton );
});


3. Open the console.
Now, every time a field is validated the result is logged to the console showing some very usefull debugging information. Also, if you click the "validate"-button, the entire form is validated just like it would before being submitted.

Check it out:

Debugging info

Bookmarklet

If you need instant access to the debugger on any website, install the bookmarklet. Simply drag this validVal debugger link to the bookmarks-bar and click it when you need to debug a form.

Share to FacebookShare to TwitterStumble itMore...