In all the examples below, I use CodeIgniter code.
Installation
Download the files from gitHub.
Include jQuery, the plugin’s js files and the plugin’s css.
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/libs/absolute_validation_engine/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/libs/absolute_validation_engine/jquery.validationEngine.js"></script>
<?php echo link_tag('js/libs/absolute_validation_engine/black_theme.css'); ?>
Field validations
Validations are defined using the field’s “class” attribute. Here are a few examples showing how it happens:
<?php
$data = array(
'name' => 'file_title',
'value' => '',
'class' => 'input',
'id' => 'file_title',
'autocomplete' => 'off',
'class' => 'validate[required, maxSize[30]]'
);
echo form_input($data);
?>
Instantiation
<script>
$(function() {
$('#upload_form').validationEngine();
});
</script>
Creating prompts
You can display a prompt on a given element. Note that the prompt can be displayed on any element given an id.
showPrompt (promptText, type, promptPosition, showArrow)
The method takes four parameters:
- the text of the prompt itself
- a type which defines the visual look of the prompt: ‘pass’ (green), ‘load’ (black) anything else (red)
- an optional position: either “topLeft”, “topRight”, “bottomLeft”, “centerRight”, “bottomRight”. Defaults to *”topRight”*
- an optional boolean which tells if the prompt should display a directional arrow
$("#my_div").validationEngine('showPrompt', 'Prompt message', 'error', 'centerRight', false);
Customizations
What would be a good library without customization ?
Adding regular expressions
Open your translation file jquery.validationEngine-en.js and add a new entry to the list:
"onlyLetter": {
"regex": /^[a-zA-Z ']+$/,
"alertText": "* Letters only"
},
* “onlyLetter” is a sample selector name
* “regex” is a javascript regular expression
* “alertText” is the message to display when the validation fails
You can now use the new regular expression as such
<input type="text" id="myid" name="myid" class="validation[custom[onlyLetter]]"/>
Check this article on how to validate a password using regular expressions.
Ajax
What if you want to send and ajax request? Say for example that you want to check if the submitted e-mail belongs to the database.
Ajax validation comes in two flavors:
- Field Ajax validations, which take place when the user inputs a value in a field and moves away.
- Form Ajax validation, which takes place when the form is submitted or when the validate() action is called.
Field Ajax (inline) validation
The inline validation calls a file every time someone changes a field. A good example would be checking if a username is available on the blur or keyup event. The inline validation is not called on submit. The inline ajax validation is meant to interact with your users directly, you will have to verify the information on submit too.
Form Ajax validation
Fallbacks
Do not rely complete on this jQuery plugin. Why? It’s based on javaScript. So if you disable javascript on your browser, the validation does not take place.
Always run your validation on your server.