jherax.github.io

This site shows examples for the plugins developed by jherax

Follow me onGitHub

About me

jherax.js + javascript programming + david rivera perez

DAVID RIVERA PEREZ
Bogotá D.C. Colombia
Software Developer
LinkedIn ProfileProfile
Stack Overflow
Stack Careers

I am software developer from Bogota - Colombia, geek of jQuery and JavaScript. I like being a front-end developer although I am more experienced as a back-end developer. I'm passionate about creating web applications, and in general, developing quality software following the principles of usability, functionality and maintainability.

Speaking of web development, it is worth mentioning three important architectural patterns, MVC (Model-View-Controller), MVP (Model-View-Presenter) and MVVM (Model-View-viewModel), with which it will be much easier to develop structured web applications. Recently, I started using the MVVM pattern, and I liked the way how cleanly separates the HTML part and the JavaScript.

MVVM is an architectural pattern based on MVC and MVP which attempts to separate the development of user-interfaces (UI) from that of the business logic and behavior in an application. This pattern makes use of declarative "data-bindings" that allow interaction between "View" and "Model" through a "ViewModel". The viewModel uses an "observable" object which implements the Observer Pattern to notify changes and automatically detect dependencies to update. In JavaScript we can find some good MVVM Frameworks like KnockoutJS and Kendo MVVM (demo)

There is an old saying: Practice makes perfect, and as most disciplines, this saying applies. Read and try on our own, makes a difference between developers who only "implements" and those who go beyond that to "create new things".

js-utils

This is a suite of utilities for JavaScript and jQuery, which includes tools for validating, text formatting, tooltips, and other features.

Getting Started

The utility has a dependency on jQuery 1.8+ which must be loaded before js-utils.
It also requires some CSS rules for functions showing tooltips, loadings, among others.

If jQuery.ui.position is available, all tooltips will be positioned using jQuery.ui, otherwise an internal implementation for positioning will be used.

fnShowDialog is a facade for jQuery.ui.dialog and has a dependency on jQuery.ui 1.9+.
But if you don't want to use jQuery.ui as the default implementation, you can override the method by specifying the source property with the new implementation, e.g. jsu.fnShowDialog.source = function (options) { ... }

This utility has the following structure:

  • jsu: main namespace
    • author: me :^)
    • version: release number
    • dependencies: array with name of dependencies
    • createNS: utility to create safe namespaces
    • wrapper: selector where dynamic HTML is placed
    • regional: namespace for language settings
    • settings: namespace for global settings
  (function() {
    // None of below settings are mandatory.

    // We set the container of the views
    jsu.wrapper = "#main-section";

    // We set the language setting
    jsu.regional.set(jsu.regional.english);

    // Sets the default position for all tooltips
    jsu.settings.position = {
      at: "left bottom",
      my: "left+2 top+5"
    };

    // Add your code for plugins init, event handlers, etc...
  })();

In many programming languages, namespacing is a technique employed to avoid collisions with other objects or variables in the global context. They're also extremely useful for helping organize blocks of functionality in your application into easily manageable groups that can be uniquely identified.

Global variables should be reserved for objects that have system-wide relevance and they should be named to avoid ambiguity and minimize the risk of naming collisions. In practice this means you should avoid creating global objects unless they are absolutely necessary.

Is critical as it's important to safeguard your code from breaking in the event of another script on the page using the same variable or method names as you are. To overcome some of these issues, we take advantage of the Module Pattern through namespace injection. The logic is shielded from the global scope by a function wrapper (usually self-invoking) which exposes an object representing the module’s public interface.

  //This encapsulated function is called IIFE
  //Immediately-Invoked Function Expressions
  var MODULE = (function() {
    var api = {};
    var privateVar;
    function privateMethod1() {}
    function privateMethod2() {}
    //expose the public interface
    api.publicMethod = privateMethod2;
    return api;
  }());

I recommend this excellent book: Learning JavaScript Design Patterns.
Also worth reading these articles:

This utility makes life easier when you require create nested namespaces.
For example, you need to create the following object structure:

  • animation
    • g2D
      • slide()
    • g3D
      • cubic()
    • tools
  // way 1: we can create the structure through an IIFE
  (function() {
    jsu.createNS("animation.tools");

    // If you use local/cached references is recommended declare them
    // within a function or module at the top of your function scope
    // (this is a dependancy declaration pattern)
    var _2d = jsu.createNS("animation.g2D");
    var _3d = jsu.createNS("animation.g3D");

    // you can get the reference of created namespace
    _2d.slide = function() {};
    _3d.cubic = function() {};
  })();

  // way 2: passing the object reference as a proxy
  (function(proxy, undefined) {
    proxy.slide = function() {};
  })(jsu.createNS("animation.g2D"));

  (function(proxy, undefined) {
    proxy.cubic = function() {};
  })(jsu.createNS("animation.g3D"));

  // way 3...n, you can use Module Pattern: loose augmentation, etc...

This namespace exposes objects and methods to setup your language preferences.
If we are using jQuery.ui, we can provide a language to configure the datepicker widget.
The available predefined languages are jsu.regional.english and jsu.regional.spanish
The spanish language is the default, but you can specify another one by calling set()
e.g. jsu.regional.set(jsu.regional.english);
You can also define your own language settings:

(function() {
  // Creates the language object (italian)
  jsu.regional.italian = {
    culture: "it", //locale codes: http://www.science.co.il/Language/Locale-codes.asp
    wordPattern: null, //regular expression pattern for text capitalization in fnCapitalize
    timeFormat: "HH:mm", //time format. HH: 00-23 hour, hh: 01-12 hour, mm: minutes, ss: seconds
    dateFormat: "MM/dd/yyyy", //date format. dd: 2-digit day, MM: 2-digit month, yyyy: 4-digit year
    dateFormatError: "Il formato della data non è corretta", //text for fnIsValidDate when date format is wrong
    dateIsGreater: "La data non può essere maggiore di oggi", //text for fnIsValidDate when date can't be greater than...
    dateIsLesser: "La data non può essere minore di oggi", //text for fnIsValidDate when date can't be lesser than...
    validateRequired: "Questo campo è obbligatorio", //text for $.fnEasyValidate when validating required fields
    validateFormat: "Il formato non è corretto", //text for $.fnEasyValidate when validating a wrong format
    dialogTitle: "Informazioni", //default title for fnShowDialog windows
    dialogCancel: "Cancellare", //default text for $.fnConfirm "cancel" button
    dialogOK: "Concordare" //default text for $.fnConfirm "agree" button
  };
  // Set the newly created language
  jsu.regional.set(jsu.regional.italian);
})();

If you want to provide additional languages to other plugins, you can pass a function as second parameter in method set(); Keep in mind that some plugins can be configured only previous to its initialization.

(function() {
  // We will create italian language for datepicker plugin
  // Additional languages for datepicker can be found at:
  // github.com/jquery/jquery-ui/tree/master/ui/i18n
  $.datepicker.regional['it'] = {
    closeText: 'Chiudi',
    prevText: '<Prec',
    nextText: 'Succ>',
    currentText: 'Oggi',
    monthNames: ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno',
          'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'],
    monthNamesShort: ['Gen','Feb','Mar','Apr','Mag','Giu',
          'Lug','Ago','Set','Ott','Nov','Dic'],
    dayNames: ['Domenica','Lunedì','Martedì','Mercoledì','Giovedì','Venerdì','Sabato'],
    dayNamesShort: ['Dom','Lun','Mar','Mer','Gio','Ven','Sab'],
    dayNamesMin: ['Do','Lu','Ma','Me','Gi','Ve','Sa'],
    weekHeader: 'Sm',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    showMonthAfterYear: false,
    yearSuffix: ''
  };
  // Set the newly created language
  jsu.regional.set(jsu.regional.italian, function() {
    $.datepicker.setDefaults($.datepicker.regional['it']);
  });
})();

This namespace is used to define a default behaviour for some functions.

  • position: Object. Sets the default position for all functions that use .position() to display a tooltip (fnIsValidDate, fnShowTooltip, $.fnMaxLength, $.fnEasyValidate). It consists of three properties:
    • at: String. Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. Acceptable horizontal values: "left", "center", "right" Acceptable vertical values: "top", "center", "bottom"
      Each dimension can also contain offsets, in pixels e.g., "right+10 top-25"
    • my: String. Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. (See the at option for full details on possible values)
    • collision: String. When the positioned element overflows the window in some direction, move it to an alternative position. (Only if jQuery.ui.position is available)
  (function() {
    // Sets default position for tooltips
    jsu.settings.position = {
      at: "left bottom",
      my: "left+2 top+5",
      collision: "none"
    };
  }());

jQuery extensions


Usage

Adds support for browser detect, because jQuery 1.9+ deprecates the browser property.
For detecting capabilities, is better to use Modernizr.
Returns Object

  // see browser and version
  console.log(jsu.browser);
  // check for a specific browser
  if (jsu.browser.msie) { ... }
  if (jsu.browser.chrome) { ... }
  if (jsu.browser.mozilla) { ... }
  if (jsu.browser.opera) { ... }

This object has two methods to determine the type of the <input> element.

  • isText (dom): This function returns true when the dom parameter is a writable <input>
    Elements classified in this category are: Category:text.
  • isCheck (dom): This function returns true when the dom parameter is a checkable <input>
    Elements classified in this category are: input type checkbox and radio.
  <input type="radio" id="radio" />
  <input type="date" id="date" />
  <textarea id="area"></textarea>
  (function() {
    //use $.get() to get DOM element
    var area = $("#area").get(0);
    var date = $("#date").get(0);
    var radio = $("#radio").get(0);
    if (jsu.inputType.isText(area)) area.value = "I am category:text";
    if (jsu.inputType.isText(date)) date.value = new Date().toISOString().substring(0, 10);
    if (jsu.inputType.isCheck(radio)) radio.checked = true;
  })();

This utility allow us to determine if an event handler was created previously by specifying a namespace.
Note: Event namespacing is a technique to handle tasks differently depending on the event namespace used, and it is very useful when you've attached several listeners to the same event, and need to do something with just one of them.
Returns Boolean

  • dom: DOM element.
  • eventname: String event type.
  • namespace: String event namespace.
  var txb = $("#txtName").get(0);
  // Checks if the event handler was defined previously
  var defined = jsu.handlerExist(txb, "focus", "fnHighlight");
  // Creates the event handler by namespacing the event
  !defined && $(txb).on("focus.fnHighlight", function(e) {
    console.log("Event type:", e.type);
    console.log("Namespace:", e.namespace || e.handleObj.namespace);
    // Add your code here...
  });

This utility creates namespaced events by appending a period and a namespace to the event name. Binding and unbinding events is a common pattern in jQuery plugin development, so you can manage the actions performed by that event, but what if I have more than one listener bound to the event and I want to remove just one of them? Event namespacing provides a way to manage specific event handlers.
Check these articles: Namespace your events and jQuery event names and namespaces
Returns String

  • eventname: String event type.
  • namespace: String event namespace.
  // Delegates the click event to highlight an element
  $(document).off("click.highlight").on(jsu.nsEvents("click", "highlight"), "[data-role=highlight]", function(e) {
      $(this).addClass("jsu-highlight");
  });

  // Attaches an anonymous function to several events
  $(".jsu-maxlength").off(".maxLength").on(nsEvents("keypress input paste", "maxLength"), function(e) {
    // Implementation
  });

Determines if the entry parameter is a DOM Element.
Returns Boolean

  • object: Object to validate.
  var obj = { name: "Mordecai" };
  if (jsu.isDOM(obj)) { ... } //false
  obj = document.getElementById("txtName");
  if (jsu.isDOM(obj)) { ... } //true
  obj = $(":button");
  if (jsu.isDOM(obj)) { ... } //false
  obj = $(":button").get(0);
  if (jsu.isDOM(obj)) { ... } //true

Determines if the entry parameter is a function.
Returns Boolean

  • object: Object to validate.
  var fn = {};
  if (jsu.isFunction(fn)) { fn(); } //false
  fn = null;
  if (jsu.isFunction(fn)) { fn(); } //false
  fn = "function";
  if (jsu.isFunction(fn)) { fn(); } //false
  fn = function() { alert("is function"); };
  if (jsu.isFunction(fn)) { fn(); } //true

This is a reference to JSON.stringify and provides a polyfill for old browsers.
fnStringify serialize an object, array or primitive value and returns it as a JSON string.
Returns String

  • json: Object to be serialized.
  var jsonPerson = {
      name: "David",
      sex: "male",
      age: 30
  };
  console.log(jsu.fnStringify(jsonPerson));

  // We use jQuery.extend to merge the contents of
  // two or more objects together into the first object.
  var jsonNew = $.extend({ alias: 'jherax' }, jsonPerson);
  console.log(jsu.fnStringify(jsonNew));

Dynamically add an external script. This method is useful to inject dependencies from an external file, in case your code might fail if it depends on a specific component. Thus for example, if you have a function that uses the kendo.ui.window component to build a window, you can check for dependencies before trying to access that component.
Returns undefined or jqXHR if you set the property execute: true

  • path: String Source of the script to be added.
    It can also be an Object with the following properties:
    • src: String Specifies a URI/URL of an external script.
    • async: Boolean Specifies whether a script will executed asynchronously, when it is available.
    • defer: Boolean Specifies whether the script is executed after the page has finished parsing.
    • charset: String Defines the character encoding that the script uses.
    • execute: Boolean Loads a script file from the server via jQuery.getScript()
    • before: String Indicates where to insert the script (same as the before parameter)
  • before: String part of src attribute of the element that identifies where the script will be added. This parameter is optional and if it is not specified, the new script will be inserted before "jherax.js"
  function fnShowWindow(o) {
    var d = $.extend({
      content: null,
      title: "Information",
      appendTo: "body",
      width: "360px"
    }, o);
    if(!window.kendo)
      jsu.fnAddScript({ src: '/scripts/kendo/kendo.core.js', execute: true });
    //after the kendo core is loaded
    if (!kendo.ui.Window)
      jsu.fnAddScript({ src: '/scripts/kendo/kendo.window.js', execute: true });
    //adds another script asynchronously
    jsu.fnAddScript({ src: '/scripts/fullscreen.js', before: 'kendo.core.js', async: true });
    //implementation...
  }

Dynamically add an external stylesheet. This method is useful to inject a cascading style sheet resource from an external file, in case that you use some plugins requiring specific css and you don't want to include them inside your main stylesheet.
Returns undefined

  • path: String source of the stylesheet to be added.
  • before: String part of href attribute of the element that identifies where the resource will be added. This parameter is optional and if it is not specified, the new stylesheet will be appended to <head>
  (function(){
    //Adds the stylesheet just before main.css link
    jsu.fnAddCSS("/content/css/jquery.dataTables.css", "main.css");
    //or appends the stylesheet to <head> element
    //jsu.fnAddCSS("/content/css/jquery.dataTables.css");
    $('.dataTable').wrap('<div class="tt-wrapper">').dataTable();
  }());

Escapes user input to be treated as a literal string in a regular expression.
This mean that special characters will be treated as literals.
e.g. the expression "(\\w+)" will turn into "\(\\w\+\)"
Returns String or null if text parameter is not string

  • text: String to literalize.
  var re1 = new RegExp("[abc]+\\d"); //string as regular expression pattern
  var re2 = new RegExp(jsu.fnEscapeRegExp("[abc]+\\d")); //literal string
  console.log("re1: " + re1.test("ac1") + ", regexp: " + re1.source);
  console.log("re2: " + re2.test("ac1") + ", regexp: " + re2.source);

Gets the value of a specific parameter in the querystring (search in the address bar).
Returns String. If the parameter is not found, an empty string is returned.

  • query: String with name of the parameter to search for.
  //assuming you have the following url
  //http://www.google.com.co/search?q=300+rise+of+an+empire&oq=300

  //we want to retrieve the value of [q] parameter
  var q = jsu.fnGetQueryToString("q");
  //prints: "300+rise+of+an+empire"
  console.log(q);

Gets the querystring from address bar and is returned as a JSON object.
Note: The entry parameter is not mandatory, and if not specified, all variables found in the querystring will be retrieved in a JSON object.
Returns Object in JSON notation.

  • query: String with name of the parameter to search for.
  //assuming you have the following url
  //http://www.youtube.com/watch?v=hrZl_EQUbRQ&hd=1

  //we want to retrieve all values from querystring
  var q = jsu.fnGetQueryToJSON();
  console.log(q); //prints: {v: "hrZl_EQUbRQ", hd: "1"}

  //we want to retrieve the value of [v]
  var v = jsu.fnGetQueryToJSON("v");
  console.log(v); //prints: {v: "hrZl_EQUbRQ"}

Clones an object and set all its properties to read-only.
In some cases, you may need to lock an object to prevent being modified.
This could be useful, for example, if you need preserve a model object.
Returns Object

  • object: Object to be cloned.
  var ajaxResponse = {
    serie: "Lenovo IdeaPad Z710",
    features: {
      processor: "Intel Core i7-4700MQ",
      graphics: "NVIDIA GeForce GT 745M",
      memory: "PC3-12800 DDR3L",
      ram: 8
    }
  };
  // Clone the original object
  var readOnly = jsu.fnCloneObject(ajaxResponse);
  console.log("READ-ONLY OBJECT:", readOnly);
  readOnly.serie = "ThinkPad W540";
  readOnly.features.ram = 16;
  console.log("READ-ONLY OBJECT:", readOnly);

Gets string representation of the specified date according to jsu.regional dateFormat timeFormat
Note: This function has support for ISO 8601 format which allow to set the value on input of type date, datetime, datetime-local. According to w3.org the value attribute must be a valid date-time as defined in RFC 3339.
Returns Object with the following properties:

  • date: String Gets the date according to dateFormat
  • time: String Gets the time according to timeFormat
  • dateTime: String Gets the date according to dateFormat + timeFormat
  • options: Object Optional. If not provided, the current date and time is returned.
    • date: Date String Number default: new Date The date to parse as string.
    • ISO8601: Boolean default: false Specifies whether the date is returned in ISO 8601 format.
  (function() {
    // We set the language setting
    jsu.regional.set(jsu.regional.english);

    // No arguments, gets the current date
    var d = jsu.fnGetDate();
    $("#date").html(d.date +" <b>"+ d.time +"</b>");

    // We provide a specific date and format (output ISO-8601)
    var dt = "12/24/2013 23:59:13";
    var iso = jsu.fnGetDate({ date: dt, ISO8601: true });
    console.log("ISO 8601:", iso.dateTime);

    // We provide a date in ISO 8601 (output regional)
    dt = "1995-12-17T03:24:59Z"; //Z UTC
    iso = jsu.fnGetDate({ date: dt });
    console.log("UTC:", iso.dateTime);

    // We provide a date in ISO 8601 (output regional)
    dt = "1995-12-17T03:24:59-05:00"; //-05:00 offset
    iso = jsu.fnGetDate({ date: dt });
    console.log("Time offset:", iso.dateTime);

    // We provide a specific date
    dt = new Date(1395971368528);
    d = jsu.fnGetDate({ date: dt });
    console.log("Regional:", d.dateTime);
  })();

Gets the date object from a string in ISO 8601 format.
It is mandatory that input parameter be a string in ISO 8601, otherwise null is returned.
Note: Time offset and UTC are omitted for the entry parameter.
Returns Date or Null

  • date: String date as string in ISO 8601 format.
  jsu.fnDateFromISO8601(0);
  jsu.fnDateFromISO8601(null);
  jsu.fnDateFromISO8601("12/17/1995");
  var date = jsu.fnDateFromISO8601("1995-12-17T03:24:59Z");
  console.log("Date:", date);

Escapes special characters inside a HTML string, e.g. the string <p>hello</p>
is encoded by inserting HTML entities in their place &lt;p&gt;hello&lt;/p&gt;
This method can be used as a simple function : fnGetHtmlText (value)
or as delegate for jQuery .val() or .text() : fnGetHtmlText (index, value)
Returns String with encoded html.

  • value: String html to be encoded.
  <textarea rows="4"></textarea>
  <textarea rows="6" id="target-v"></textarea>
  <div id="demo-wrapper">
    <h3>fnGetHtmlText</h3>
    <p><u>Delegated function</u></p>
  </div>
  setTimeout(function() {
    var html = $("#demo-wrapper").html();
    $("textarea").val($.trim(html));
    // you can run it just as a function
    var htmlEncoded = jsu.fnGetHtmlText(html);
    console.log("Encoded:", htmlEncoded);
    $("#target-v").fnShowTooltip("This html will be encoded ...3");
  }, 1);

  setTimeout(function() {
    $(".vld-tooltip").remove();
    $("#target-v").fnShowTooltip("This html will be encoded ...2");
  }, 1000);

  setTimeout(function() {
    $(".vld-tooltip").remove();
    // you can also run it as a delegate for .val() or .text()
    // note that we just pass the reference to the function
    $("#target-v").val(jsu.fnGetHtmlText).fnShowTooltip("Encoded");
  }, 2000);

Gets the selected text in the document.
Note: There are some <input> elements that not support text selection.
Returns Object with the following properties:

  • text: String Selected text. Whitespace is removed from the beginning and end of text.
  • slice: String Complement of the selected text (if the active element is category:text)
  • start: Number Initial position of the cursor (if the active element is category:text)
  • end: Number Final position of the cursor (if the active element is category:text)
  var sel = jsu.fnGetSelectedText();
  if (sel.text !== "") alert(sel.text);
  console.log(sel);

Gets the position of the cursor in the dom element.
Note: There are some <input> elements that not support text selection.
Returns Number

  var text = $("#txtName").val("Hello!").get(0);
  var pos = jsu.fnGetCaretPosition(text);
  console.log(pos);

Gets the position of the cursor in the dom element.
Note: There are some <input> elements that not support text selection.
Returns undefined

  • dom: DOM element category:text.
  • position: Number that indicates where the cursor is set.
  var text = $("#txtName").get(0);
  text.value = "Hello World!";
  text.focus();
  jsu.fnSetCaretPosition(text, 5);
  //cursor is positioned after "Hello"

Applies a transformation to the text, removing all line-breaks, spaces, and tabs from the beginning and end of supplied string. If the whitespace characters occur in middle of the string, also they are removed.
Note: When object parameter is a DOM element, the value property is used as the string to transform.
Note: The object defined in jsu.regional.<language>.wordPattern is a regular expression used to lowercasing some words after text capitalization. Only works when type parameter is "word"
Note: You can use this function as a jQuery extension, see jQuery.fnCapitalize.
Returns String

  • object: String or DOM element category:text.
  • type: String specifying the text transformation. Can be one of the following values:
    • "word" transform to lowercase and then turns the first letter of each word into uppercase.
    • "title" turns the first letter of each word into uppercase.
    • "first" turns only the first letter to uppercase.
    • "upper" transform to uppercase.
    • "lower" transform to lowercase.
  var text = "\n  make  your\t  code DRY  \n ";
  console.log('original text: "' + text + '"');
  console.log('word : "' + jsu.fnCapitalize(text, "word" ) + '"');
  console.log('title: "' + jsu.fnCapitalize(text, "title") + '"');
  console.log('first: "' + jsu.fnCapitalize(text, "first") + '"');
  console.log('upper: "' + jsu.fnCapitalize(text, "upper") + '"');
  console.log('lower: "' + jsu.fnCapitalize(text, "lower") + '"');

If you want to lowercase specific words, you can do it this way:

  (function() {
    // We configure the global language setting
    // The following words will always be lowercase
    jsu.regional.english.wordPattern = /\s(?:And|Are|At|A|O[nrf]|By|In|The)\b/g;
    jsu.regional.set(jsu.regional.english);
    var text = " pc AND KEYBOARD\t ArE oN tHe table ";
    console.log("Before: ", '"' + text + '"');
    // Transforms the text after 2 seconds
    setTimeout(function() {
      text = jsu.fnCapitalize(text, "word");
      console.log("After: ", '"' + text + '"');
    }, 2000);
  })();

Sets numeric format according to es-CO culture by placing the decimal . and thousands , separator.
Note: When object parameter is a DOM element, the value property is used as the string to format.
Note: You can use this function as a jQuery extension, see jQuery.fnNumericFormat.
Returns String with the formatted number.

  var num = "123456789,47.15";
  console.log(jsu.fnNumericFormat(num)); //sends string
  var dom = $("#txtName").val(num).get(0);
  jsu.fnNumericFormat(dom) //sends DOM
  console.log(dom.value);

This Object provides a namespace for the functions validating specific formats.
Each function defined in the namespace receives the value parameter as the text to validate.
Note: Validators are also implemented as a jQuery extension, see jQuery.fnIsValidFormat.
Important The validator functions return Boolean

The value parameter is a String or DOM element category:text.

  • time (value) Validates the time format according to timeFormat
  • date (value) Validates the date format according to dateFormat
  • datetime (value) Validates full date format according to dateFormat + timeFormat
  • password (value) Validates the password strength (8+ characters, 1+ uppercase and 1+ number)
  • email (value) Validates an email address.
  • ipv4 (value) Validates an IP address v4.
  • latitude (value) Validates the latitude range from -90 to 90.
  • longitude (value) Validates the longitude range from -180 to 180.
  • set (validator, fn) This function is able to create or redefine a validator function.
    • validator: String with the name of the validator to create or redefine.
    • fn: Function that performs the validation. Should return true or false
  (function() {
    //Configures the language setting
    jsu.regional.set(jsu.regional.english);
    var _email = "some.gmail.com";
    var _pass = "insuff1ci3nt";
    var _dt = "10/31/2013 16:10";
    console.log("email:", jsu.fnIsValidFormat.email(_email));
    console.log("password:", jsu.fnIsValidFormat.password(_pass));
    console.log("datetime:", jsu.fnIsValidFormat.datetime(_dt));

    //Create a new validator for numbers
    jsu.fnIsValidFormat.set("number", function (text) {
      text = jsu.inputType.isText(text) ? text.value : text.toString();
      var pattern = /^(?:\d+\.)?\d+$/;
      return pattern.test(text);
    });

    //Redefine the validator for email
    jsu.fnIsValidFormat.set("email", function (text) {
      text = jsu.inputType.isText(text) ? text.value : text.toString();
      var pattern = /(\w[-._\w]*\w@\w[-._\w]*\w\.\w{2,3})/i;
      return pattern.test(text);
    });

    //Test the newly created validators
    console.log("number:", jsu.fnIsValidFormat.number("109.35"));
    console.log("email:", jsu.fnIsValidFormat.email("mail@yahoo.com"));
  })();

Evaluates whether the entry DOM element has the date format for the value property.
Date validations are performed according to jsu.regional by dateFormat and timeFormat
The validation message is displayed with a tooltip. If jQuery.ui.position is available, the tooltip is rendered by jQuery.ui.position, otherwise an extended method for jQuery.position is used.
Note: You can use this function as a jQuery extension, see jQuery.fnIsValidDate.
Important: You can customize the messages defined in jsu.regional namespace:
dateIsGreater dateIsLesser dateFormatError
Returns Boolean

  • dom: DOM element category:text
  • options: Object with the following properties:
    • compareTo: Date String default: new Date The date to compare against.
    • isFuture: Boolean default: false Whether the date must be greater than compareTo.
    • warning: String Message indicating that entry date did not meet the requirements.
    • position: Object Sets the properties to position the tooltip:
      • at: String Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. Acceptable horizontal values: "left", "center", "right" Acceptable vertical values: "top", "center", "bottom"
        Each dimension can also contain offsets, in pixels e.g., "right+10 top-25"
      • my: String Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. (See the at option for full details on possible values)
      • collision: String When the positioned element overflows the window in some direction, move it to an alternative position. (Only if jQuery.ui.position is available)
  (function() {
    //Configures the language setting
    jsu.regional.set(jsu.regional.english);
    var d = new Date();
    $("#txtLicence").val(
      jsu.fnGetDate({ date: d.setHours(24) }).date);
    $("#txtBirthday").val(
      jsu.fnGetDate({ date: d.setHours(24) }).date);
  }());

  //Validates elements in the form
  $("#btnSend").on("click", function() {
    var dBirthday = $("#txtBirthday").get(0);
    var dDriverLic = $("#txtLicence").get(0);

    if (!jsu.fnIsValidDate(dDriverLic)) return false;
    if (!jsu.fnIsValidDate(dBirthday, {
        compareTo: dDriverLic.value,
        warning: "Your birthday can't be greater than driver's license expedition"
    })) return false;

    alert("Submit form");
  });

This function is very useful when you need display a validation message.
It shows the message in a tooltip at the right side of dom and focuses that element.
The tooltip element is painted according to the rules defined by .vld-tooltip class.
It has the following DOM structure: <span class="vld-tooltip"> your message </span>
Important: If jQuery.ui.position is available, the tooltip is rendered by jQuery.ui.position, otherwise an extended method for built-in jQuery.position is used.
Note: By specifying jsu.settings.position you can override the position for all tooltips.
Note: You can use this function as a jQuery extension, see jQuery.fnShowTooltip.
Returns Boolean, always returns false

  • dom: DOM element to where the tooltip is positioned.
  • message: String with the message to display.
  • position: Object Sets the properties to position the tooltip:
    • at: String default: "right center" Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. Acceptable horizontal values: "left", "center", "right" Acceptable vertical values: "top", "center", "bottom"
      Each dimension can also contain offsets, in pixels e.g., "right+10 top-25"
    • my: String default: "left+6 center" Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. (See the at option for full details)
    • collision: String default: "flipfit" When the positioned element overflows the window in some direction, move it to an alternative position. (Only if jQuery.ui.position is available)
  $(function() {
    // Configures the language setting
    jsu.regional.set(jsu.regional.english);

    var _email = $("#txtEmail").get(0);
    var _admission = $("#txtDate").get(0);

    if (!jsu.fnIsValidFormat.email(_email)) {
      // Displays the tooltip at the default position
      return jsu.fnShowTooltip(_email, "The email address is not valid");
    }
    if (!jsu.fnIsValidFormat.date(_admission)) {
      // Displays the tooltip at the specified position
      return jsu.fnShowTooltip(
        _admission,
        "The admission date is not valid", {
            at: "left bottom",
            my: "left+2 top+5"
        });
    }
  });

Sets the default position for all tooltips

  (function() {
    // Sets default position for tooltips
    jsu.settings.position = {
      at: "left bottom",
      my: "left+2 top+5"
    };
  }());

  $(function() {
    // Validates some fields
    if (!$("#txtBirthday").fnIsValidDate({
        warning: "Your next birthday can't be lesser than today",
        isFuture: true
    })) return false;

    var pass = $("#txtPassword");
    if (!pass.fnIsValidFormat("password")) {
      return !pass.fnShowTooltip("The password did not meet the requirements");
    }
  });

This is a facade for jQuery.ui.dialog which is a modal window useful for displaying text, DOM or jQuery elements. You can create dynamic html by passing the html string to the content property.
Generated HTML is appended by default to where jsu.wrapper selector indicate, but if you want to place it into a specific element, then you can set the appendTo property by specifying the container element.

Some images are used to display an icon to the left of text, but only works when content is plain text.
Also you can display existing HTML elements by passing the DOM or jQuery object to content property.

Note: By default, it has a dependency on jQuery.ui.dialog and has some css overrides, but you can redefine the functionality by providing a function reference to the jsu.fnShowDialog.source property, this way the dependency to jQuery.ui.dialog is removed. For consistency, the supplied function should have the same signature as the original fnShowDialog function (but is not mandatory).
Returns jQuery dialog element.

  • options: Object that provides the following settings:
    • appendTo: String or DOM or jQuery. Specifies the element to where the dialog window should be appended; default value is jsu.wrapper
    • title: String. Title of the dialog window; default value is jsu.regional.<language>.dialogTitle
    • content: String or DOM or jQuery. The content to display in the dialog window. If content is plain text, you can add some icons, or else you can create dynamic html.
    • icon: String. Name of css class to display an icon to the left of text, if content is String
      The available icon names are: "info", "alert", "success", "cancel", "error".
    • height: Number indicating the height of the dialog window, in pixels.
    • maxHeight: Number default: 86%. The maximum height to which the dialog can be resized.
    • minHeight: Number default: 130. The minimum height to which the dialog can be resized.
    • width: Number indicating the width of the dialog window, in pixels.
    • maxWidth: Number default: 1024. The maximum width to which the dialog can be resized.
    • minWidth: Number default: 150. The minimum width to which the dialog can be resized.
    • closeOnPageUnload: Boolean. Specifies whether the dialog should close when the event beforeunload is raised. This feature is useful if you are sending a form in the document.
    • buttons: Object or Array. Specifies which buttons should be displayed on the dialog window. The context of the callback is the dialog element; if you need access to the button, it is available as event.target object.
      • Object: The keys are the button labels and the values are the callbacks for when the associated button is clicked.
      • Array: Each element of the array must be an object defining the attributes, properties, and event handlers to set on the button.
  (function() {
    //sets the default container
    jsu.wrapper = "#page-wrapper";
    //configure the global language setting
    jsu.regional.english.dialogTitle = "System message";
    jsu.regional.set(jsu.regional.english);
  }());

  //simple dialog window
  $("#sample-1").on("click", function() {
    jsu.fnShowDialog({
      icon: "info",
      content: "This is the default dialog which is useful for displaying information."
    });
  });

  //modal confirmation window
  $("#sample-2").on("click", function() {
    jsu.fnShowDialog({
      icon: "alert",
      title: "Delete selected elements?",
      content: "These items will be permanently deleted<br>and cannot be recovered. Continue?",
      width: 330,
      buttons: {
        "Delete": function() {
          $(this).dialog("close");
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });
  });

  //dialog window with an existing element
  $("#sample-3").on("click", function() {
    jsu.fnShowDialog({
      appendTo: "#main-form",
      content: $("#wizard-view"),
      closeOnPageUnload: true,
      maxHeight: 300
    });
  });

Redefine the original function to use kendo.ui instead of jquery.ui

  // basic implementation of kendo.ui.Window
  function fnShowWindow(options) {
    $("#wnd-dialog").remove();
    //TODO: check for dependencies to prevent code breaks.
    var wnd = $("<div id='wnd-dialog'>").append(options.content).appendTo(options.appendTo || "body");
    var dialog = wnd.data("kendoWindow");
    if (!dialog) {
        (dialog = wnd.kendoWindow({
            minHeight: +options.minHeight || 50,
            height: +options.height || null,
            minWidth: +options.minWidth || 90,
            width: +options.width || 320,
            title: options.title || "",
            actions: ["Close"],
            modal: true
        }).data('kendoWindow')).center();
    }
    else dialog.open();
    return dialog;
  }

  (function() {
    //overrides the original function, and removes the jquery.ui dependency
    jsu.fnShowDialog.source = fnShowWindow;
  }());

  $(function() {
    //displays the new dialog window
    jsu.fnShowDialog({
      title: "System Message",
      content:
        '<div class="wnd-icon alert"></div>' + 
        '<p>Open console to view results » <em>F12</em> or <em>shift + ctrl + i</em></p>'
    });
  });

Shows an overlay screen with the "loading" animation at the center.
The progress animation is done via CSS3, therefore you must add the following css rules:
#floatingBarsG .blockG @keyframes fadeG .bg-fixed .bg-opacity
Returns Boolean, always returns true

  • options: Object that provides the following settings:
    • hide: Boolean default: false Hides the loading screen.
    • delay: Number default: 2600 FadeIn animation, in milliseconds.
    • of: String jQuery DOM default: null Which element to position against. The first matching element will be used as the loading container, otherwise, the container is set by jsu.wrapper
<div id="target" style="display: inline-block; width: 200px; height: 200px; border:1px solid #bbb; border-radius:10px; background: #eee;"></div>
  $(function() {
    //Shows the loading animation at the center of screen
    jsu.fnLoading();
    setTimeout(function() {
      jsu.fnLoading({ hide: true });
    }, 3000);

    //Shows the loading animation at the center of #target
    setTimeout(function() {
      jsu.fnLoading({ of: "#target" });
    }, 3200);
    setTimeout(function() {
      jsu.fnLoading({ hide: true });
    }, 6200);
  });

This utility detects the width of the scrollbar in the browser, in pixels.
It is useful when you create layouts and the content exceeds the container size, then comes the scrollbar, taking space in the layout (used in fnShowdialog when maxHeight property was added and its default value was set to 86% of the screen height)
Returns Number

  var dialog = $("#popup");
  if (dialog.hasVScroll()) {
      var width = dialog.width();
      var scrollWidth = jsu.fnScrollbarWidth();
      dialog.width(width + scrollWidth);
  }

jQuery plugins

This is a set of utilities for jQuery.
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy API that works cross-browser. If you want to learn more about jQuery, here is a full guide: How jQuery Works.

This plugin detects if the first element in the collection has a vertical scrollbar.
Returns Boolean

  var dialog = $("#popup");
  if (dialog.hasVScroll()) {
    var width = dialog.width();
    var scrollWidth = jsu.fnScrollbarWidth();
    dialog.width(width + scrollWidth);
  }

This plugin detects if the first element in the collection has a horizontal scrollbar.
Returns Boolean

  var dialog = $("#popup");
  if (dialog.hasHScroll()) {
    var height = dialog.height();
    var scrollWidth = jsu.fnScrollbarWidth();
    dialog.height(height + scrollWidth);
  }

Position an element relative to another. This plugin extends jQuery's built-in .position() method. If jQuery.ui is not loaded, calling the .position() method will cause the internal implementation of the method to be used instead. If no arguments or the of property is not set, the default .position() method is called.
Returns jQuery

  • options: Object. Sets the properties to configure the plugin:
    • of: String jQuery DOM. Determines the first matching element to position against.
    • at: String. Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. Acceptable horizontal values: "left", "center", "right" Acceptable vertical values: "top", "center", "bottom"
      Each dimension can also contain offsets, in pixels e.g., "right+10 top-25"
    • my: String. Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. (See the at option for full details on possible values)
    • collision: String. When the positioned element overflows the window in some direction, move it to an alternative position. (Only if jQuery.ui.position is available)
  setTimeout(function() {
    var target = $("#target");
    $("#floating").position = {
      of: target,
      at: "right center",
      my: "left+2 center"
    };
  }, 600);

  setTimeout(function() {
    $("#floating").position = {
      of: "form > p:first",
      at: "left bottom",
      my: "left+2 top+5"
    };
  }, 2000);

Centers an element relative to another. If no arguments or the of property is not set, matching elements are placed at the center of screen (with position: fixed)
Returns jQuery

  • options: Object. Sets the properties to center the element:
    • of: String jQuery DOM. Determines the first matching element to position against.
  // positioning at the center of screen
  $(".notify").fnCenter();

  // positioning at the center of #target
  var div = $('<div id="divHello">').css({
    'padding': '20px',
    'background': '#ccc',
    'border-radius': '5px',
    'display': 'inline-block'
  }).appendTo("body").html("<h4>Hello jQuery</h4>");
  div.fnCenter({ of: "#target" });

Limits the maximum number of characters allowed for the matching elements category:text.
A tooltip is placed to the right of the element, showing the actual number of characters typed.
By default the tooltip is positioned by .position() at: "right bottom" but this position can be overridden for all tooltips by setting the jsu.settings.position property; if you do not want to affect all tooltips, then you can specify the position by providing the position parameter to the function.
The appearance of the tooltip is ruled by the .vld-tooltip class.
Returns jQuery

  • length: Number. Maximum number of characters allowed.
  • position: Object Sets the properties to position the tooltip:
    • at: String default: "right bottom" Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. Acceptable horizontal values: "left", "center", "right" Acceptable vertical values: "top", "center", "bottom"
      Each dimension can also contain offsets, in pixels e.g., "right+10 top-25"
    • my: String default: "right top+6" Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. (See the at option for full details)
    • collision: String default: "flipfit" When the positioned element overflows the window in some direction, move it to an alternative position. (Only if jQuery.ui.position is available)
  $("#txtName").fnMaxLength(20);
  $("#license").fnMaxLength(10, {
    at: "right top-5",
    my: "right bottom"
  });

This is the jQuery extension for fnCapitalize function.
Applies a transformation to the text, removing all line-breaks, spaces, and tabs from the beginning and end of supplied string. If the whitespace characters occur in middle of the string, also they are removed.
Note: The object defined in jsu.regional.<language>.wordPattern is a regular expression used to lowercasing some words after text capitalization. Only works when type parameter is "word"
Note: The text is transformed when the blur event is triggered.
Returns jQuery

  • type: String specifying the text transformation. Can be one of the following values:
    • "word" transform to lowercase and then turns the first letter of each word into uppercase.
    • "title" turns the first letter of each word into uppercase.
    • "first" turns only the first letter to uppercase.
    • "upper" transform to uppercase.
    • "lower" transform to lowercase.
  setTimeout(function() {
    var text = "\n do\t it  with\t  jQuery\t\n ";
    var $input = $("#txtName").val(text).width(180);
    $input.fnShowTooltip("This text will be transformed");
    $input.fnCapitalize("title").focus();
  }, 1);

  //raise blur event to transform text
  setTimeout(function() {
    alert("click to transform");
    $("#txtName").blur();
  }, 2000);

If you want to lowercase specific words, you can do it this way:

  (function() {
    // We configure the global language setting
    // The following words will always be lowercase
    jsu.regional.english.wordPattern = /\s(?:And|Are|At|A|O[nrf]|By|In|The)\b/g;
    jsu.regional.set(jsu.regional.english);
    // You can bind the event handler at beginning
    var $input = $("#txtName").fnCapitalize("word");
    var text = " pc AND KEYBOARD\t ArE oN tHe table ";
    // Raise blur event to transform text
    $input.val(text).focus();
    setTimeout(function() {
      alert("transform");
      $input.blur();
    }, 2000);
  })();

This is the jQuery extension for fnNumericFormat.
Sets the numeric format according to es-CO culture.
Places the decimal . and thousands , separator.
Note: The text is formatted when keyup or blur event occurs.
Returns jQuery

  var num = "123456789,47.15";
  console.log(num); // string formatting
  $("#txtName").val(num).fnNumericFormat().focus();

This function creates a mask to accept only numeric characters in the input.
Returns jQuery

  // allowed characters: [0-9]
  $(".vld-numeric").fnNumericInput();

This function applies a custom mask to accept only those character that meet the pattern.
Returns jQuery

  • mask: It can be one of these types:
    • String: a literal specifying allowed characters.
    • RegExp: a regular expression pattern with allowed characters.
  // allowed characters: a b c 1 - 6
  $("#txtGrade").fnCustomInput("abc1-6");

  // allowed characters: @ ñ ; . - [A-Za-z0-9_]
  $("#txtEmail").fnCustomInput(/[@ñ;.\-\w]/);

This function prevents the keyset to be pressed.
To allow a set of characters, better to use $.fnCustomInput
Returns jQuery

  • keys: String with character(s) to be blocked.
  // prevents pressing the spacebar in the document
  $(document).fnDisableKey(" ");

  // prevents pressing the keys q,w,e,r,t at #txtName
  $("#txtName").fnDisableKey("qwert");

This is the jQuery extension for the fnIsValidFormat validators and performs the validation by passing the validator name as the type argument. The value property of the first matching element is used as the text to validate.
Note: You can create or redefine validators through jsu.fnIsValidFormat.set() method. Once defined the validator, it can be used inmediately by providing the validator name as the type argument.
Returns Boolean

  • type: String specifying the type of validation:
    • "time" Validates the time format according to timeFormat
    • "date" Validates the date format according to dateFormat
    • "datetime" Validates full date format according to dateFormat + timeFormat
    • "password" Validates the password strength (8+ characters, 1+ uppercase and 1+ number)
    • "email" Validates an email address.
    • "ipv4" Validates an IP address v4.
    • "latitude" Validates the latitude range from -90 to 90.
    • "longitude" Validates the longitude range from -180 to 180.
  (function() {
    //Configures the language setting
    jsu.regional.set(jsu.regional.english);
    var dt = $("#date").val("12/31/2013 23:10");
    var isValid = dt.fnIsValidFormat("datetime");
    console.log("datetime:", isValid);

    //Create a new validator for numbers
    jsu.fnIsValidFormat.set("number", function (text) {
      text = jsu.inputType.isText(text) ? text.value : text.toString();
      var pattern = /^(?:\d+\.)?\d+$/;
      return pattern.test(text);
    });

    //Test the newly created validator
    var age = $("#age").val("30");
    console.log("number:", age.fnIsValidFormat("number"));
  })();

This is the jQuery extension for fnIsValidDate function.
Evaluates whether the first matching element has the date format for the value property.
Date validations are performed according to jsu.regional by dateFormat and timeFormat
The validation message is displayed with a tooltip. If jQuery.ui.position is available, the tooltip is rendered by jQuery.ui.position, otherwise an extended method for jQuery.position is used.
Important: You can customize the messages defined in jsu.regional namespace:
dateIsGreater dateIsLesser dateFormatError
Returns Boolean

  • options: Object that provides the following properties:
    • compareTo: Date String default: new Date The date to compare against.
    • isFuture: Boolean default: false Whether the date must be greater than compareTo.
    • warning: String Message indicating that entry date did not meet the requirements.
    • position: Object Sets the properties to position the tooltip:
      • at: String Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. Acceptable horizontal values: "left", "center", "right" Acceptable vertical values: "top", "center", "bottom"
        Each dimension can also contain offsets, in pixels e.g., "right+10 top-25"
      • my: String Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. (See the at option for full details on possible values)
      • collision: String When the positioned element overflows the window in some direction, move it to an alternative position. (Only if jQuery.ui.position is available)
  (function() {
    //Configures the language setting
    jsu.regional.set(jsu.regional.english);
    var d = new Date();
    $("#txtLicence").val(
      jsu.fnGetDate({ date: d.setHours(24) }).date);
    $("#txtBirthday").val(
      jsu.fnGetDate({ date: d.setHours(24) }).date);
  }());

  //Validates elements in the form
  $("#btnSend").on("click", function() {
    if (!$("#txtLicence").fnIsValidDate()) return false;
    if (!$("#txtBirthday").fnIsValidDate({
        compareTo: $("#txtLicence").val(),
        warning: "Your birthday can't be greater than driver's license expedition",
        position: {
          at: "left bottom",
          my: "left+2 top+3"
        }
    })) return false;

    alert("Submit form");
  });

This is the jQuery extension for fnShowTooltip function.
This function is very useful when you need display a validation message.
A tooltip is shown at the right side of current element, and set focus on that element.
The tooltip element is painted according to the rules defined by .vld-tooltip class.
It has the following DOM structure: <span class="vld-tooltip"> your message </span>
Important: If jQuery.ui.position is available, the tooltip is rendered by jQuery.ui.position, otherwise an extended method for built-in jQuery.position is used.
Note: By specifying jsu.settings.position you can override the position for all tooltips.
Returns jQuery

  • message: String with the message to display.
  • position: Object Sets the properties to position the tooltip:
    • at: String default: "right center" Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. Acceptable horizontal values: "left", "center", "right" Acceptable vertical values: "top", "center", "bottom"
      Each dimension can also contain offsets, in pixels e.g., "right+10 top-25"
    • my: String default: "left+6 center" Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. (See the at option for full details)
    • collision: String default: "flipfit" When the positioned element overflows the window in some direction, move it to an alternative position. (Only if jQuery.ui.position is available)
  (function() {
    // Configures the language setting
    jsu.regional.set(jsu.regional.english);
    // Sets default position for tooltips
    jsu.settings.position = {
      at: "left bottom",
      my: "left+2 top+5"
    };
  }());

  $(function() {
    var _email = $("#txtEmail");
    var _admission = $("#txtDate");

    if (!_email.fnIsValidFormat("email")) {
      // Displays the tooltip at the default position
      return !_email.fnShowTooltip("The email address is not valid");
    }
    if (!_admission.fnIsValidFormat("date")) {
      // Displays the tooltip at the specified position
      return !_admission.fnShowTooltip(
        "The admission date is not valid", {
            at: "left+2 top-5",
            my: "left bottom"
        });
    }
    if (!$("#txtBirthday").fnIsValidDate({
        warning: "Your next birthday can't be lesser than today",
        isFuture: true
    })) return false;
  });

Validates the specified elements in the document. Validations can be performed automatically (depending on the css class provided by the element to validate), or customized (by providing the fnValidator option). If you want automatic validations, then set the css class to the elements to validate, by adding the prefix vld- plus the name of the validator (e.g. "vld-datetime"). As the default validations are performed by fnIsValidFormat(), you can also create new validators or redefine the existing ones through jsu.fnIsValidFormat.set() method, so you can customize the validators as you want.
These are the default css classes:

  • "vld-required": causes the validation by checking empty fields.
  • "vld-date": causes the validation by jsu.fnIsValidFormat.date
  • "vld-time": causes the validation by jsu.fnIsValidFormat.time
  • "vld-datetime": causes the validation by jsu.fnIsValidFormat.datetime
  • "vld-email": causes the validation by jsu.fnIsValidFormat.email
  • "vld-ipv4": causes the validation by jsu.fnIsValidFormat.ipv4
  • "vld-password": causes the validation by jsu.fnIsValidFormat.password
  • "vld-latitude": causes the validation by jsu.fnIsValidFormat.latitude
  • "vld-longitude": causes the validation by jsu.fnIsValidFormat.longitude

If you wish to validate a specific group of elements, then you can create a validation group by adding the data-group attribute to the validating elements and also to the validator button.
You can customize the message defined in jsu.regional validateFormat
Returns jQuery

  • options: Object Sets the properties to configure the validation:
    • fnValidator: Function Performs a custom validation. The function must return true to pass the validation, or false to prevent default actions. This property is not mandatory, and if it is not specified, default validation is performed (determined by the css class of the validating elements)
    • fnBeforeTooltip: Function Executes a custom task just before to show the tooltip with the validation message. This function receives the current validating element as the entry parameter in order to do something like change the element that displays the tooltip. It is very useful when widgets that modify the original DOM element are used, such as kendo.ui.Editor (hides the original <textarea> and creates an <iframe> instead) or jQuery.chosen (hides the original <select> and creates an <ul> instead). To set the new element displaying the tooltip, set the domTarget property to entry parameter, with the replacement DOM element.
    • firstItemInvalid: Boolean default: false Validates the first item of a <select> element as invalid option, useful when you have the first item as the text for "select an option".
    • container: String jQuery DOM default: jsu.wrapper The element containing the form fields to which fnEasyValidate will set the focus to validate the format according to, for example, $.fnCapitalize, $.fnNumericInput, $.fnCustomInput, among others. If you don't want auto-focus on specific elements (e.g. prevent displaying calendar), set .no-auto-focus class on those fields.
    • requiredForm: Boolean default: false Determines whether the vatidator button and the validating elements should be inside a <form> element.
    • position: Object Sets the properties to position the tooltip:
      • at: String default: "right center" Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. Acceptable horizontal values: "left", "center", "right" Acceptable vertical values: "top", "center", "bottom"
        Each dimension can also contain offsets, in pixels e.g., "right+10 top-25"
      • my: String default: "left+6 center" Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. (See the at option)
      • collision: String default: "flipfit" When the positioned element overflows the window in some direction, move it to an alternative position. (Only if jQuery.ui.position is available)
<select id="ddlType" class="vld-required" data-group="group.a">
  <option value="0">Select...</option>
  <option value="1">Magnetic</option>
  <option value="2">Electric</option>
</select>
<p><input type="text" id="txtValue" class="vld-required" data-group="group.a" /></p>
<p><input type="text" id="txtDate" class="vld-date" /></p><!--This one is not in group.a-->
<p><input type="text" id="txtEmail" class="vld-email" /></p><!--This one is not in group.a-->
<p><textarea id="txtNotes" class="vld-required"></textarea></p><!--This one isn't in group.a-->
<button type="submit" id="btnAdd1" data-group="group.a">Add new item</button>
<button type="submit" id="btnAdd2">Add Notes</button>
$(document).on("ready", function () {
  $("#ddlType").chosen();
  $("#txtNotes").fnMaxLength(100);
  $("#txtValue").fnNumericInput();
  $("#txtDate").datepicker().addClass("no-auto-focus");
  $("#btnAdd2").fnEasyValidate();
  $("#btnAdd1").fnEasyValidate({
    firstItemInvalid: true,
    fnValidator: function (btn) {
      var num = $('#txtValue');
      if (+num.val() < 1000) {
        num.fnShowTooltip("Price must be greater than $999");
        return false; //prevent default actions
      }
      return true; //run default actions
    },
    fnBeforeTooltip: function(dom) {
      if ((/select/i).test(dom.nodeName)) {
        //changes the item to display tooltip
        dom.domTarget = $(dom).next().get(0);
      }
    }
  });
});

The magic of myth and legend has come true in our time. One types the correct incantation on a keyboard, and a display screen comes to life, showing things that never were nor could be;
The computer resembles the magic of legend in this respect, too. If one character, one pause, of the incantation is not strictly in proper form, the magic doesn't work. Human beings are not accustomed to being perfect, and few areas of human activity demand it. Adjusting to the requirement for perfection is, I think, the most difficult part of learning to program.
~ Frederick Brooks.