Forums

Ajax forms and validation

kfci 14 Jan, 2010
Hi,

Before I start, Chronoforms ROCKS!!! I have managed to produce some really funky forms using validation and more. For the last few days I have been working on a modal pop-up iframe dynamic ajax form, hmm sounds complicated, well it is rather: -

The main problem i have is validating form fields that are called up using Ajax. EVERYTHING works fine, except when i bring a new field into the modal box using Ajax. Working through the javascript it looks like I must replicate the code generated by chronoforms for every field rendered by ajax?

If this is the case, then oh dear!!! Lots of work for me to do. I had a similar problem with modal links (class="modal") before, but managed to produce a modal.init function with 2-3 lines of code that would re-build all the modal links once ajax had put them on the page. It would be real nice to have a similar js function to re-initialise validation for ajax generated form fields.

So, before i start going down the long road of re-generating all the validation code for every form field rendered by ajax, could someone please confirm this is the case and what i need to do is re-build all the validation js every time a new form field is added?

Thanks in advance,
KFCI
GreyHead 14 Jan, 2010
Hi KFCI,

You're way ahead of me in this area . . .

The main validations are added by ChronoForms on page load but you can still add a validaton to a new field with the following:
var email_val = new LiveValidation('email', {
  });
  email_val.add(
    Validate.Email, {
      failureMessage: 'Failed! Invalid email.'
  });
where you need to replace 'email' with the input id, and 'Validate.Email' with a call to the validation(s) you want to apply.

Bob
kfci 18 Jan, 2010
Hi Bob,

Thanks for the response. You know I had a nightmare installing this. Every time I added the validation code to the page using Ajax it did not work. I did not realise, but if you add javascript to the page using Ajax, it does not run!!! How annoying. This is a known problem with the DOM and therefore I had to produce a workaround to get it to work. The workaround involved adding an onsuccess function to the Ajax function which ran any javascript required once the page was loaded. So, thanks heaps for your response, it got me on the right tracks and subsequently I now have working validated-modal-popup-iframe-dynamic-ajax forms😀 amazing really.

If you would like to know how I managed it, let me know and I'll post my CFBAK files to you personally (theres two CFBAKs per form). Although I would not want them posted publicly due to private info in the CFBAK files, e.g. email addresses etc.

Thanks again [Solved]

KFCI
GreyHead 18 Jan, 2010
Hi kfci,

Well done indeed !!

Bob
smartsak 13 Jun, 2011
Basically I am creating a site for people who organize trips (ie hotel bookings, guided tours etc)
I have created and implemented the template according to their specifications.
Now there are many pages in the site, and the hotel section has many hotels in separate articles, each mentioning details of a hotel, location, photos etc (pretty standard stuff)

There is a requirement to add a feature where people can:
1. Browse through the hotels
2. Click a button on the hotel article page (which says "favorite hotel" or something to that effect)
3. This hotel will then be listed as a favorite in a different page, and any other subsequent hotels which are marked as "favorite".

The basic idea is like an online shopping cart.

The idea is that people keep on adding hotels they like, and then later come back to the page which lists all the favorites, and the visitors can then compare the hotels. And then a contact form can be selected which will email all the hotels selected in the favorites list.

How can I go about this? I have found a couple components and modules (such as hotel guide, my favorite pages) in the Joomla extensions directory, but they mostly have some limtations such as:

1. Needs a login username and password (client does not want this, favorites should be stored as cookies)
2. Pages can be favorited, but there is no provision to create contact forms to be sent out after that to all the hotels.
3. hotel guide requires a different template altogether, with limited scope for modification.

Is there any other solution? Are there any PHP scripts I could use? The problem is PHP scripts do not run through articles.

This site will give a good idea of what I want - http://www.splendia.com/ (the hotel selection / marking part)

Please help me out on this, I am getting desperate! :-(

Thanks and Best Regards,

Shahzad
GreyHead 13 Jun, 2011
Hi Shahzad,

Probably the neaatest way to do this would be to add a link to each page with the page id and a JavaScript snippet to save the page id into a cookie.

You can put PHP into an artilce with an extension like Jumi (or with ChronoForms but that may a bit more than you need to do this).

Then on the list page you could use ChronoConnectivity to read the list of favourites from the cookie and create a list of entries from a database table.

Bob
energetica1 02 Jun, 2013
Hi Bob,
Thanks for the good guides you've written up. I've managed to create a contact form which uses Ajax to populate sub drop downs, and randomly email a contact based on a selection.

When I was added validation to the field via class="validate['required']" and setting the field title, it would validate this field on the ajax returned selector, but no required fields on the form after that point in time would validate.

I also made a custom validation which worked i.e. %customCheck, however the same thing happened - It didn't apply to required fields after my custom field.

As such, I had put all required forms above my custom fields. Did you have an idea of what might be causing this, and how to fix it? I suspected it might have something to do with Javascript and the DOM being updated/Javascript no longer having a hook into the page.
GreyHead 03 Jun, 2013
Hi energetica1,

It sounds as though there may be a JavaScript error when the Ajax update is run. Do you see any errors in the JavaScript Console of your web browser (click F12 to access it in most browsers).

Bob
energetica1 27 Jun, 2013
Hi Bob,

Unfortunately there isn't any javascript errors reported (using Firefox Firebug)
GreyHead 05 Jul, 2013
Hi energetica1,

Did you solve this? If not, please post a link to the form so I can take a quick look.

Bob
This topic is locked and no more replies can be posted.