JudgementJS

JudgementJS is a small vanilla JavaScipt plugin that will accelerate your development of form validation on the client side. Inspired by the "Form_Validation" class of the PHP CodeIgniter framework, JudgementJS is based on a system of validation rules that you define for your fields of your form which requires validation.

JudgementJS has been designed to allow developers to write as little code as possible and thus increase productivity. If the javascipt is not your cup of tea or you do not want to get yourself into a tedious development, JudgementJS is for you.

You also have the ability to internationalize and customize the error messages of your forms using the JSON language files.

All this and much more can be achieved in just a few lines of code. TRY IT!

Installation

Standalone

Download latest release

Include the plugin file into your page.

<script src="judgement.min.js"></script>

npm

In your terminal run

npm install judgementjs

Use in node projects

var Judgement = required('judgementjs');

Please note that you can't use JudgementJS on the server side because the plugin uses the document object and that object is unknown for node.js, so JudgementJS works only on client side.

Bower

In your terminal run

bower install judgementjs

Include the plugin into your page

<script src="bower_components/judgementjs/judgement.min.js"></script>

Usage

To use "judgementJs" follow the steps below.

1. Create a form.
2. Add some inputs with id, data-rules and data-label-name attributs.
   • data-rules attribute must contain the validation rules separated by pipes | (list of rules).
   • data-label-name attribute must contain the name of the input label. The lable name is used in the error messages.
3. Add a submit button with an id attribute. (The button can be any valid html tag, but in general it is the <input>, <button> or <a> tag).
4. Write some lines of JavaScript.

HTML

<form id="my-form">
	<label>My input</label>
	<input type="text" id="my-input" data-rules="required|alpha_numeric|min_length[5]" data-label-name="My input" />
	
	<a id="my-submit-button">My button</a>
</form>

JS

var options = {
	formId : 'my-form',
	submitButtonId : 'my-submit-button'
};
var myForm = new Judgement(options);
myForm.startJudgement();

That's all. Now your form is checked in real time.

The formId and submitButtonId options are required, and you can choose several other options. For instance, you can prevent/allow submitting form with Enter key with preventEnterKey option, enable/disable the input highlights (red/green borders) with inputHighlights option or enable/disable the test mode with testMode option to never submit the from.

JS

var options = {
	formId : 'my-form',
	submitButtonId : 'my-submit-button',
	onBlurChecking : true,
	preventEnterKey: true,
	inputHighlights: false,
	testMode: true
};
var myForm = new Judgement(options);
myForm.startJudgement();

Easy !

For more options please check the list of options

Example

<form id="example-form">
	<label>Name</label>
	<input type="text" id="example-name" data-rules="required|alpha_dash_space" data-label-name="Name" />
	
	<label>Email</label>
	<input type="text" id="example-email" data-rules="required|email" data-label-name="Email" />
	
	<label>Confirm email</label>
	<input type="text" id="example-confirm-email" data-rules="equal_to[example-email,Email]" data-label-name="Confirm Email" />
	
	<label>Birth date</label>
	<input type="text" id="example-date" data-rules="required|date[ddmmyyyy,.]" data-label-name="Birth date" />
	
	<label>Terms of Service</label>
	<input type="checkbox" id="example-tos" data-rules="required" data-label-name="Terms of Service" /> I agree to the Company <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a> <br/><br/>
	
	<a id="example-submit-button" class="btn">Judge</a>
</form>

var options = {
	formId : 'example-form',
	submitButtonId : 'example-submit-button',
	onBlurChecking : true,
	onSubmit: function(form){
		alert("SUCCESS !");
	}
};
var exampleForm = new Judgement(options);
exampleForm.startJudgement();

Errors

JudgementJS offers several options for managing and displaying validation errors.

1. Show errors individually over each erroneous field.

   For each error, a span element is created containing the error message and the error message is placed before the field.

   The span looks like this.

   <span class="fv-error" id="fv-error-field-id">Some error message</span>

   The fv-error class allows you to apply a style to errors and the id is used by the plugin for error handling.

   Individual errors are triggered by realTimeChecking and onBlurChecking options.

2. Display all errors in a container.

   The errorContainer option allows you to display errors in one place on the page. To do this, just give it the id of a container that is on the page. E.g.

   var options = {
   	...
   	errorContainer : 'my-error-container-id'
   }
   var form = new Judgement(options);
   form.startJudgement();

   The form checking starts when the submit button is clicked.

3. Manually manage the error displaying.

   If the above two methods are not suitable for you, it is possible to manage the error display manually with the onError and onSuccess. E.g.

   var options = {
   	...
   	onError : function(errorsFields) {
   		console.log(errorsFields);
   		
   		// your custom code to display errors.
   	},
   	onSuccess : function(successesFields, errorsFields){
   		console.log(successesFields);
   		
   		// your custom code to display successes and hide some error messages.
   	}
   }
   var form = new Judgement(options);
   form.startJudgement();

   The form checking starts when the submit button is clicked.

   In addition to error handling, you must also manually manage the highlighting of fields.

Errors / Inputs Styles

Only three classes are required to style your error messages and input highlights

1. Error messages .j-error

   .j-error{
   	margin: 0;
   	padding: 0;
   	color: #ff0000;
   	display: block;
   }

2. Error highlight .j-error-highlight

   .j-error-highlight{
   	border-top: 1px dotted rgba(237, 18, 18, .5) !important;
   	border-right: 1px dotted rgba(237, 18, 18, .5) !important;
   	border-bottom: 2px solid #ED1212 !important;
   	border-left: 1px dotted rgba(237, 18, 18, .5) !important;
   }

3. Success highlight .j-success-highlight

   .j-success-highlight{
   	border-color: #0FDB4C;
   	border-top: 1px dotted rgba(15, 219, 76, .5) !important;
   	border-right: 1px dotted rgba(15, 219, 76, .5) !important;
   	border-bottom: 2px solid #0FDB4C !important;
   	border-left: 1px dotted rgba(15, 219, 76, .5) !important;
   }

!important tag is used to override the defaul input style.

Internationalization

The jsonLangFile option allows you to load a language file containing the error messages.

Please note that jsonLangFile option will work with server environment only. Offline testing on your local PC won't work. You must install MAMP or AMPPS or something similar to test locally. This only applies if the jsonLangFile option is set, otherwise you don't need a server environment to test the plugin.

var options = {
	formId : 'lang-form',
	submitButtonId : 'lang-submit-button',
	onBlurChecking : true,
	jsonLangFile : 'js/langs/fr.json'
};
var langForm = new Judgement(options);
langForm.startJudgement();

The following form displays now the error messages in french.

The Json file

That file contains error messages that the plugin displays for each rule. E.g.

{
	...
	"range_length" : "{field} requires between {min} and {max} characters"
	...
}

The messages contains different tags that you must keep and don't change their names. E.g. If you need the range_rule you will write range_rule[5,10] so the {min} will be replaced by 5 ant the {max} will be replaced by 10. The tag {field} will be replaced by the value of the data-label-name attribute.

JudgementJS comes with two language files en.json and fr.json. If you not set the jsonLangFile the default language is used (English).

Options

* required options.

⚠ realTimeChecking, onBlurChecking and errorContainer can not be used at the same time. You must to choose one of them.

Callback functions

Note: The onSubmit callback function can manipulate the form through the callback parameter (e.g "form").
The onError callback function can manipulate the errors through the callback parameter (e.g. "errors").

Rules