• download
  • documentation
  • forums
  • demo
  • contact
  • blog

meteora

javascript widgets

Documentation

  • Autocomplete
  • Bubble
  • Calendar
  • Carousel
  • Datagrid
  • Dialog
  • Editor
  • Effect
  • Filebrowser
  • Form
  • Jsonrpc
  • Menu
  • Notebook
  • Picbox
  • Popup
  • Searchlist
  • Selection
  • Spinbutton
  • Tablesort
  • Toolbox
  • Treeview

What does this control do?

Sends form elements using AJAX, and executes commands that are contained within the scripts response. Doing things this way has many advantages, for example, you can add some security without doing things twice by checking fields only in the server-side, the user interaction will be covered within the response. You can even upload files using this control without having to leave the current page. It also can be used to validate forms.

For an usage example check out the Meteora.Form demo.

How to use

In order to use this control, paste this line of javascript right at the beginning of your script tag:

Meteora.uses('Meteora.Form');

This control can be used with any form element, the only thing you need to do is to attach a special function to the form's onsubmit attribute.

<form onsubmit="return formSubmit(this)"></form>

When the users sends the form, the server-side script is supposed to answer with a special JSON string such as the example below:

{
  'successMessage': 'Everything went OK'.
}

Here goes another example, this time the user will be notified of an error:

{
  'errorMessage': 'There was an error, please correct it and send the form again'.
}

A handly thing you need to remember is that if you want the form to be reset you must send a successMessage, otherwise you may send an errorMessage. This is very useful since if the user has a single error he does not need to fulfill the whole form again, he just need to correct the error and send the form again.

Validating form inputs

You can perform a simple validation by adding a class to the input elements you want to validate. The following examples will validate that the user had filled the input with an integer number, right before submitting the form.

<input class="required-int" type="text" />
<label class="required-int"
  <input type="text" />

</label>
The classes you may want to use to validate forms are:
  • required-int An integer number is required.
  • required-double A two-decimal number is required.
  • required-float A decimal number is required.
  • required-alpha Only numbers (0-9), letters (a-zA-Z), dot (.) and underscore (_).
  • required-email A valid e-mail address.
  • required The user must not leave the field empty.
This javascript validation is for improving user interaction only, you application should not rely on javascript-only validation since that may lead to security issues.

Overwriting formSubmit()

If you want to overwrite the formSubmit() function just replace it in any script that will be loaded after Form.js

formSubmit = function(form) {
  var control = new Form(form);
  if (someProceessIsOK()) {
    control.submit();
  }
  return false;
}

Methods

You don't really need those methods, unless you want to add more things to formSubmit().

submit()

Calls to validate(), if everything is OK, the form will be sent and the form will be lock()'ed, when the server's response is received the form will be unlock()'ed and the response will be executed.

lock()

Disables user interaction for all the elements of the form.

unlock()

Enabled user interaction for all the elements of the form.

validate()

Calls the input validation routine.

Copyright © 2007-2009 Astrata Software.