Turn any form to a Jetform :) Demo.

jQuery:
jQuery is required to work (any version is acceptable)

Markup:
All the inputs should be wrapped in a container (e.g div) if you wish to present errors under each input.
Only inputs with name property will be processed.

Jetform plugin include a validation parser and a custom error message template engine.
Validation rules are a string list separated by a pipe “|”.

<div class="form-group">
    <label for="firstName">Firstname</label>
    <input type="text" id="first_name" name="jf_txt_1" data-validate="min_length[2]|max_length[4]">
</div>

You can easily create your own validation function.
The validation function should be avaliable in the window scope.
Let's create a new function which checks the value of a given field:

function is_black(element) {
    return element.val() == '#000';
}

Now, we can start using it as a validation rule:

<div class="form-group">
    <label for="myColor">Choose color</label>
    <input type="text" id="myColor" name="colorPicker" data-validate="is_black">
</div>

Optionally, we can set an appropriate error message for the new rule:

$('form').jetform({
    template: {
        is_black: "{$field} is not black"
    }
});

It is also possible to define a custom error message (ignoring the actual error)
This error message will pop every time a validation rule failed to validate the field's value

<div class="form-group">
    <label for="fullname">Fullname</label>
    <input type="text" id="fullname" name="colorPicker" data-error="custom_error" data-validate="required|min_words[2]">
</div>

Don't forget to define the custom message's template:

$('form').jetform({
    template: {
        custom_error: "{$field} contain invalid value"
    }
});

There are 2 ways to detect errors when they occure:
Class level event: onError event will be triggered with an array of errors as a function argument

onError: function(errors){
    console.log(errors);
}

Element level event: jetform.error event will be triggered with an error object as a function argument.
Since each time only one validation error is desplayed for each field, the current error object will be passed as an argument.

$('#full_name').on('jetform.error', function(event, error){
    console.log(error);
});

Each error is an object with the following properties:

You can easily extend the validation engine by teaching it new validation rules.
Before creating a Jetform instance add a new validation rule by extending the Jetform.Utils interface:

Jetform.Utils.validations.is_dog = function(element){
    return element.val() == 'woof woof';
}

After creating the new validation rule, we need to setup the appropriate error message:

$('form').jetform({
    template: {
        is_dog: "{$field} is not a dog"
    }
});

Once we finished we can start using out new validation rule:

<div class="form-group">
    <label for="firstName">Fullname</label>
    <input type="text" id="full_name" name="jf_txt_1" data-validate="required|is_dog">
</div>

You can merge two inputs by adding data-prefix=#prefix-selector to the desired input.

Array of objects. Each object contain a definition for a possible response
. The Keys available for each object are:

Defaults:

responses: [
    {
        key: 'success',
        gtm_event: 'jetform_submit_success',
        preCallback: 'displaySuccess',
        postCallback: 'onSuccess',
        arguments: ['args']
    },
    {
        key: 'reason=unique',
        postCallback: 'onFail',
        template: 'unique'
    }
]

You can control over the spinner that is shown in the input type submit while the data is being sent to Jetform.
The avaliable properties are:

spinner: {
    active: true,
    width: '30px',
    height: '20px',
    color: '#333'
}

You can disable certain characters from being typed in a certain input type.
The permission is given by specifying a regular expression and an event to check the expression against the values of the input (usually it will be done on keypress).

permit: {
    email: {
        rule: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
        event: 'keypress'
    }
}

Jetform.Utils is a static interface which is accessible from anywhere.
The interface contains several general purpose methods and properties:

$('form').jetform({
    token:'nZq6scKaNvcXdgjszIcN1kaHhbYDKjAAie0yPKyTVU4AiE0Aiv9VGKu0sH7fVqWhqEkRvUyhbApBpYRGmgPkZA==',
    errorSelector: '.input-error',
    resetErrorEvent: 'keypress',
    onSuccess: function(args, response){
        alert('I am the king of the world!');
    },
    onError: function(errors){
        alert('Ooops... something went wrong');
    }
})

$('form').jetform('reset');