Validetta

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?

• You can check fields whether it is empty or not or it is chosen or not.
• You can do e-mail check.
• You can do number check.
• You can check if the two fields are equal to each other.
• You can check credit card number validation.
• You can limit number of characters written to fields.
• You can limit number of choice of multiple select box or check box.
• You can use remote validator.
• By creating your own regular expression, you can check fields according to this regular expression.

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

Options & Defaults

$('#form').validetta({
  showErrorMessages : true, // If you dont want to display error messages set this option false
  /** 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
  bubblePosition: 'right', // Bubble position // right / bottom
  bubbleGapLeft: 15, // Right gap of bubble (px unit)
  bubbleGapTop: 0, // Top gap of bubble (px unit)
  /* To enable real-time form control, set this option true. */
  realTime : false,
  validators: {} // Custom validators stored in this variable
  /** Callback functions */
  onValid : function(){},
  onError : function(){}
});

Data Attribute Settings

Callbacks

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

• onValid : This function to be called when the user submits the form and there is no error.
• onError : This function to be called when the user submits the form and there are some errors.

$('#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.');
  }
});

Getting invalid fields

Returns the list of invalid fields as an object, containing the properties "field" and "errors".

$('#form').validetta({
  onError : function( event ){
    // this -> form object
    var invalidFields = this.getInvalidFields();
  }
});

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.

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);;

Override global error messages

Sometimes, you may want to edit error messages, instead of including the language file. Here you can find the list of all built in error messages.

$('#form').validetta({
  realTime: true
},
{
  required  : 'Custom error message.'
});

Scss Variables

Name	Description
$validetta-font-size	Font size of the error message
$validetta-line-height	Line height of the error message
$validetta-font-family	Font family of the error message
$validetta-bubble-color	Font color of the error message in the bubble type
$validetta-bubble-bg-color	Background color of the error message in the bubble type
$validetta-bubble-radius	Border radius of the error message in the bubble type
$validetta-bubble-caret-size	Caret size of the error message in the bubble type
$validetta-bubble-pad-vertical	Vertical padding of the error message in the bubble type
$validetta-bubble-pad-horizontal	Horizontal padding of the error message in the bubble type
$validetta-inline-color	Font color of the error message in the inline type

Examples

• Simple demo forms to showcase basic rules. updated
• Using callback functions
• Open an error window manually
• Display inline
• Remote validation
• Sending ajax request when form is valid
• Change the element which to be added error messages new
• Change error messages via data attribute. new
• Display error messages at bottom new