AHAH/AJAX form validation and submission for Drupal core

nedjo's picture

Currently there are various contrib modules implementing form validation and/or submission via AJAX/AHAH.

The earliest is Ajax submit. Originally part of the Javascript Tools package, Ajax submit was moved to its own project for Drupal 6. In Drupal 5 Ajax submit combined an API and a UI. For Drupal 6, the UI was (temporarily) removed in order to produce a pure API module that could be used by other module developers free from a UI. At the same time the Javascript was rewritten to use the jQuery forms plugin.

Recently the Ajax forms module was written. Ajax forms provides functionality similar to that of the D5 Ajax submit and an API similar to that of the D6 Ajax submit.

AJAX form submission has also been implemented in the Popups module and recently in the Asyncrhonous module.

Besides this, many modules implement one or another custom approach to AJAX form submission, e.g., Views.

The proliferation of contrib implementations of AJAX/AHAH form validation and submission suggests two needs:

  1. Standardization on a common API to be jointly developed and maintained.

  2. Consideration of introducing AJAX/AHAH form validation and submission to Drupal core.

This post is an invitation to discussion of these topics.

Is there interest in working up a core patch introducing AJAX form validation and submission? If so, what are our best starting places? What is our best approach for D6?

(I recently posted an enabling issue that might help remove an obstacle to AJAX submission in core: http://drupal.org/node/357336.)

Comments

Form Builder's Validation

quicksketch's picture

Form Builder has built-in AJAX validation (along with the element preview). If you haven't seen it there's a demo at linked at the project page http://drupal.org/project/form_builder.

However the entire validation system is about 10 lines (if even) so I'm not sure it would be worthwhile forming any dependencies for it.

What's the goal for such AJAX validation? Just to alert the user of errors before they submit the page? If we get a validation error, where do we put it once we have them?

Validation goes with submission

nedjo's picture

I'm thinking of validation not as a stand alone component but as part of a solution set. For AJAX form submission, I guess we will usually need at a minimum the following:

  1. Server side (PHP): Designate forms that should submit via AJAX.
  2. Client side (Javascript): Attach ajax submit behavior to form.
  3. Client side: Add information to ajax form submission that informs server that this is an AJAX requrest.
  4. Client side: On submission, remove any error messages and classes.
  5. Server side: Validate form submission, returning data on error--error messages and enough data for the client to identify the elements to attach error classes to.
  6. Client side: On validation failure, attach error classes to appropriate form elements, display error messages, scroll to error messages.
  7. Server side: On validation success, complete form submission, return data to client. Data may include:
    • Location to forward to.
    • Data on object or objects created or modified through form submit. E.g., ID and title of a node.
  8. Client side: respond in a number of possible ways to server form submission data. Options might include:
    • Forward to a new page.
    • Remove form (close dialogue that form was in).
    • Reset form in preparation for new submission.
    • Copy data from form submission result to existing or new form elements (e.g., update an autocomplete element with the ID of a node created through form submission).

Because these components will be needed for most or all AJAX form submission, I think they're what we should abstract into an API, probably for core.

I don't mean that a generic API needs to do all of the specific things in the last two points--just that it should be flexible enough to enable them.

This needn't be a lot of code. For instance the ajaxsubmit.js file covers most of these client tasks in under 90 lines.

I think this is great, has

frankcarey's picture

I think this is great, has there been any progress?

Frank Carey
TwelveGrove Drupal Development
http://www.twelvegrove.com

It's not about validation,

Sylvain Lecoy's picture

It's not about validation, its about rebuilding the form, submit the form and close the popup where the form was, check if problems had occurred, and tells the user then, and lots of things like that.

Your form builder project is nice, but not for developers, it add lots of extra stuff, jqueryUI, jquery Update, that you'll probably don't want, but is required to make the module works.

And the AHAH form is not enough powerful or its API is not designed to handle with form submission, etc.. You have to write 10 or more line function to submit, rebuild, get data from cache, and say "Well done!" to the user. Then you have to write your custom javascript event listener to close the form the user just submit! And that work is exactly the same for each of your js handler (server side).

That function has been ported to core in D7 (according to this article: http://drupal.org/node/331941) and I agree that it should have a unified API instead of letting peoples and modules implements it on their own.

Implemented in this module

btopro's picture

Implemented in this module as well...

http://drupal.org/project/outline_designer

Keep up the great work ajax guys, I've been wondering for the last year now why no one had been able to figure this out :)

"Plaguing the world with Drupal; One Plone, Moodle, Wordpress, Joomla user at a time since 2005." ~ btopro

http://elearning.psu.edu/
http://elearning.psu.edu/projects/
http://elearning.psu.edu/drupalineducation/

Username validity check in core?

frankcarey's picture

This module's functionality is something i personally think should be in core, but the issue probably needs solving in a more general way. I'm really in favor of the ability to do per field validation like what's going on here.

http://drupal.org/project/username_check

Frank Carey
TwelveGrove Drupal Development
http://www.twelvegrove.com

Javascript

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week