Validetta

A tiny jquery plugin for validate forms.

Download Validetta

Currently v1.0.0

Tweet

What is Validetta ?

Validetta is jQuery plugin which you can do client-side validation of your forms. It aims to decrease your burden with easy usage and flexible structure. You can support the repository at GitHub. If have a suggestion or idea, or have found a bug, please create an issue by going to issues page of github repository.

Browser support

The project is tested in Chrome and Firefox. It should work in the current stable releases of Chrome, Firefox, Opera, Safari as well as IE8 and up.

License

Licensed under the MIT License.

What can be done?

How does it work?

It is sufficient to copy downloaded validetta folder to root folder and attach essential folders to your web page. You don’t need to copy validetta folder to root folder but those are applied in the following expression as if validetta is copied to root folder.

include the dependent libraries and css files

<link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" >

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

You can include language file if you want.

<script type="text/javascript" src="validetta/localization/validettaLang-tr-TR.js"></script>

Then, you will only need to call the plugin inside $(document).ready function:

$("#form").validetta();

and add data-validetta attribute to element which you want to control.

<input type="text" name="exm" data-validetta="required,minLength[2],maxLength[3]" />

Validators

Name Description
required checks fields whether it is empty or not or it is chosen or not.
number checks fields if it is consist of number or not.
email checks email if it is valid or not.
creditCard checks credit card number written to fields if it is valid or not.
equalTo[input_name] checks if the two fields are equal to each other according to input name.
minLength[x] checks fields if it is consist of minimal X character.
maxLength[x] checks maximal X character entry to the area.
minChecked[x] checks minimal X option if it is marked or not.
maxChecked[x] checks maximal X option if it is marked or not.
minSelected[x] checks minimal X option if it is chosen or not.
maxSelected[x] checks maximal X option if it is chosen or not.
custom[regexp_name] checks if field is suits to identified ordered expression or not.
remote[validator] checks fields using remote validator.

Warning!

Validator arguments ( e.g. input_name, regexp_name and remote_name ) should be any word character ( letter, number, undercore ) and should not be greater than 15 characters!

Changed validator names

equal validator name has changed to equalTo with v1.0.0

customReg validator name has changed to custom with v1.0.0

Options & Defaults

$('#form').validetta({
    /** You can display errors as inline or bubble */
    display : 'bubble', // bubble or inline
    /**
     * Error template class
     * This is the class which will be added to the error message window template.
     * If you want special style, you can change class name as you like with this option.
     * Error message window template : <span class="errorTemplateClass">Error messages will be here !</span>
     */
    errorTemplateClass : 'validetta-bubble',
    /** Class that would be added on every failing validation field */
    errorClass : 'validetta-error',
    /** Same for valid validation */
    validClass : 'validetta-valid', // Same for valid validation
    /**
     * Error window's close button.
     * if you want to deactive error window's close button, set it false
     * You can add a close button for error windows, and you can add specific class to it 
     */
    errorClose : true,
    /** The html class that will add on element of HTML which is closing the error message window */
    errorCloseClass : 'validetta-bubbleClose',
    /* To enable real-time form control, set this option true. */
    realTime : false,
    /** Costum reg method variable */
    custom : {},
    /** Remote validation method variable */
    remote : {},
    /** Callback functions */
    onValid : function(){},
    onError : function(){}
});

Removed options!

ajax and onCompleteFunc options has removed with v1.0.0

Callbacks

There are two different callbacks you can declare when setting up the validation.

$('#form').validetta({
    onValid : function( event ) {
        event.preventDefault(); // Will prevent the submission of the form
        alert( 'Nice, Form is valid.' );
    },
    onError : function( event ){
        alert( 'Stop bro !! There are some errors.');
    }
});

Remote Validation

This option allows you to perform server-side validation. By using this option you can validate the value given by the user on server side before the form gets submitted. The validation function will send an ajax request to URL declered in remote options.

The form will get the class validetta-pending while the server is being requested.

The response from the ajax request

The response from the ajax request must be a JSON formatted object, containing the properties "valid" and "message".

Remote validator settings

$('#form').validetta({
    remote : {
        validator_name : {
            // Here, you must use ajax setting determined by jQuery
            // More info : http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings
            type : 'POST',
            url : 'remote.php',
            datatype : 'json'
        }
    }
});

An example for remote.php

<?php
$response = array( 'valid' => false, 'message' => 'Sorry, Something went wrong!');
if( isset($_POST['username']) ) {

  if ( $_POST['username'] !== 'validetta' ) {
    $response = array( 'valid' => false, 'message' => 'This username is already taken!' );
  } else {
    $response = array( 'valid' => true );
  }

}
echo json_encode($response);;

Information!

Remote validation request fires if does not have any client-side error in the field!

Examples