Spacer is a javascript library that offers powerful realtime client-side validation for input fields, simple dialog API and extra helpful tools for: inputs, form submission, ajax, web navigation, tables and arrays.



Spacer makes input field validation is very easy though comprehensive validation patterns and rules. In the other hand, Spacer helps you write much less code to achieve your tasks through helpful APIs that deal with different aspect of your web application.


Real-time forms validation



Message, confirm and prompt dialogs


Resource Manager

Multi language resource manager


Form Submission

Automatic ajax submission



Practical ajax helpers



Useful table manipulation functions


Please refers to Spacer Structure for more details.

Single Interface - Multiple Implementation

Spacer use this principle for several reasons:

  • Separate User Interface output from the core functionality
    For example, validation process is separated from how the errors messages are shown to user.

  • Make Spacer extendable by implementing custom drivers
    You can easily implement your own validation driver to show errors in desired way. Or you can implement your own dialog driver to show dialogs in different way.

To explain this principle, let's talk about dialogs:

You can show message like so: spa.dialog.message(title, msg, status, icon) (which is a single interface). But how the message will appear depends on which current dialog driver selected in Spacer options.

Spacer offers multiple dialog drivers:

  • alert driver uses browser native dialogs
  • bootstrap3 driver show dialogs as bootstrap 3 dialogs
  • sweetAlert driver show SweetAlert dialogs

This means that every driver has its own implementation to show dialogs. Let's take this example:

spa.dialog.message('Message Title', 'Message content goes here', 'success', 'success');

We see that a single message can be shown in different ways according to the current dialog driver.

The same thing apply to validation. How the validation error messages are shown to the user depends on which current validation driver selected in Spacer options.

Spacer Structure

Spacer has several namespaces which are:

  • dialog: Simple dialog API.
  • validation: Contains validation functions.
  • resource: Resource management tool.
  • input: Contains inputs manipulation functions.
  • ajax: Contains ajax helper functions.
  • form: Contains form submission functions.
  • web: Contains functions related to url and redirection.
  • table: Contains table manipulation functions.
  • array: Contains array helper functions.