Small jQuery Real-Time Form Validation Plugin - Validetta

Validetta is a clean and simple jQuery client-side and real-time form validation plugin that checks the required field, email, number, credit card, and more other input fields while submitting. Validetta plugin also has the ability to limit & check the number of input characters and choice of multiple select box or check box.

Basic Usage:

1. Load the jQuery validetta plugin on the web page, after jQuery javascript library.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="validetta-min.js"></script>

2. Create a text input field. Using data-validetta attribute to add checking methods to this input.

<form id="demo">
<input type="text" name="validation" data-validetta="required,number" />
</form>

3. All the checking methods.

• required - It checks fields if it is empty or not.
• number - It checks fields if it is consist of number or not.
• email - It checks E-mail if it is valid or not.
• creditCard - It checks credit card number written to fields if it is valid or not.
• equal[input_name] - It checks if the two fields are equal to each other according to input name. input_name should not be greater than 15 characters!
• minLength[x] - It checks fields if it is consist of minimal X character.
• maxLength[x] - It checks maximal X character entry to the area.
• minChecked[x] - It checks minimal X option if it is marked or not.
• maxChecked[x] - It checks maximal X option if it is marked or not.
• minSelected[x - It checks minimal X option if it is chosen or not.
• maxSelected[x] It checks maximal X option if it is chosen or not.
• customReg[regexp_name] - It checks if field is suits to identified ordered expression or not. regexp_name should not be greater than 15 characters!

4. The sample CSS for the validation error container.

.validetta-error {
display: block;
font: 12px/14px Arial, Helvetica, sans-serif;
position: absolute;
background-color: #CD2E26;
max-width: 325px;
border-radius: 5px;
color: white;
padding: 5px 12px;
}
.validetta-error:before {
content: '';
display: block;
position: absolute;
top: 7px;
left: -5px;
width: 0px;
height: 0px;
border-right: 5px solid #CD2E26;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
}
.validetta-errorClose {
display: block;
cursor: pointer;
position: absolute;
top: -1px;
right: 3px;
color: white;
font-weight: bold;
}

5. Call the plugin with options.

(function($){
    $('#demo').validetta({
        realTime : true
    });  
});

6. All the options.

(function($){
$('#demo').validetta({
// If you dont want to display error messages set this options false
// Error Template : <span class="errorTemplateClass">Error messages will be here !</span>
showErrorMessages : true, 

// Error display options, // bubble / inline
display : 'bubble', 

// Class of the element that would receive error message
errorTemplateClass : 'validetta-bubble', 

// Class that would be added on every failing validation field
errorClass : 'validetta-error', 

// Same for valid validation
validClass : 'validetta-valid', 

// Bubble position // right / bottom
bubblePosition: 'right', 

// Right gap of bubble
bubbleGapLeft: 15, 

// Top gap of bubble
bubbleGapTop: 0, 

// To enable real-time form control, set this option true.
realTime : false, 

called when the user submits the form and there is no error.
onValid : function(){}, 

called when the user submits the form and there are some errors
onError : function(){}, 

// Custom validators stored in this variable
validators: {} 
});  
});

Change log:

2016-12-08

• bugfixes

v1.0.1 (2015-08-17)

• update.

v0.9.0 (2013-12-13)

• Added option that display errors as inline

v0.8.0 (2013-12-13)

• Fixed bug about checkbox when using an array for a name ie name="exm[]"

---

This awesome jQuery plugin is developed by hsnaydd. For more Advanced Usages, please check the demo page or visit the official website.