Tidbits on development with Yahoo Use Interface AJAX components.

Form Component

I am using the Yahoo User Intrace (YUI), but wanted to have the ability to do client side validation along with server side validation and submission of form data via ajax. YUI has some of that with the Dialog component, but it has a couple of short comings:

• Only available within a dialog
• Can not be used with inline forms
• Has no support for client or server validation

So I ended up writting a Form component that was based on the guts of the Dialog component. It has no user interface, but rather focuses on the behind the scenes items for the following:

• Submission of form data; standard and AJAX as per the Dialog component
• Client side validation; does basic standard validations for required fields, max lengths of strings, email addresses, etc. This also support the use of tooltips to display errors inline with the form controls.
• Server side validation using AJAX; client and server validation work inconjunction validation.

The Form component is made up of the following files:

• form.debug.js
• extensions.debug.js
• error.gif
• required.gif

Requires the following YUI (only tested with 2.4.1):

• yahoo-dom-events.js
• yahoo-min.js
• json-beta-min.js
• utilities.js
• container-min.js

Also makes use of the following if available:

• button-min.js

Examples of the use of the Form component can be seen in the screenshots for the RLM web application alpha.

Using the Form component is relatively straight foward:

• Setup a normal <form> tag with an ID and ACTION attributes. You may also specify the ACTIONVALIDATE attribute with a url for doing server validation, i.e.
  

  <form id="test" action="submit.php" actionvalidate="validate.php" method="POST">
  

• You will also need an element to contain the button, i.e.
  

  
  <div id="test_buttons"></div>
  

• Create the Form component object.

  var form_test = new YAHOO.thZero.Form("form_test",
       imageError: "error.gif",
       imageRequired: "required.gif",
       successReload: true,
       buttonSubmit: true,
       buttonCancel: true,
       buttonDelete: false,
       buttonReset: true,
          buttonsEl: "test_buttons"
      form_test.render(false);

• Call the render method on the Form component object; this takes a boolean value to determine whether to focus on the first control or not.

      form_test.render(false);
  

The Form component has quite a few configuration options; see the source.