Chronoforms validation inside sobipro

Im trying to put my chronoforms form into the sobipro template using modules anywhere. However, validation doesn't work when I do that. I tried adding "load js" to on load after show HTML as well as before all other functions in on submit. In the load js I put:
Jquery.noconflict();

I tried using both dynamic file yes and no

Sobipro templates use xsl/xml/xslt if that matters.
Any ideas on possible solutions or troubleshooting tips? Or is this a question more suited for the sobipro crowd since the validation works perfectly fine when that form is not inside sobipro?

Also, in case it helps, the validation works fine when the form is on a sobipro page but is displayed in a main template position as opposed to actually inside sobipro. (also, just to cover other possibilities, the validation still works when using modules anywhere to display the form in an article, so I don't think it's a modules anywhere issue)

Hi Uclabruins,

Sounds like a sobipro question to me :-(

Please post a link to the form so I can take a quick look.

Bob

Thanks, here is the form:
https://acpg.org/index.php/Cardilly-Deals-Scam.html#tabs-4

I added an "auto server side validation" with a stopper in the onFail event for now so that it won't submit the form if all fields aren't filled in, but that's not ideal since the user won't know that the form wasn't submitted. (unless there's some way to automatically send the user back to that same tab after submitting)

Also, I'm using V4 RC2.

Hi uclabruins,

Use the Event Loop action instead of the stopper. That will re-display the form and show the error messages from the validation.

Bob

Thanks. Is it possible to send the user back to the tab that has the form on it? When the form is submitted, if validation isn't "correct", I'd like for the url to be:
?chronoform=companyresponse&event=submit#tabs-4
as opposed to:
?chronoform=companyresponse&event=submit

The problem is that the url before the ?chronoform= part is different since the same form is displayed on several pages.

Or, is it possible to submit the form within the module itself as opposed to submitting the whole page?

If that's not possible/is too difficult, is it by chance possible to display a lightbox after the form is submitted telling the user that the form wasn't submitted correctly (assuming a fail for validation).

Hi Uclabruins,

You can probably add JavaScript to your form to add the tab number to the action url in the form tag.

The only way I can think of to 'submit the form within the module' would be to convert it to an Ajax form. That's theoretically possible but I've never seen it done with a ChronoForm.

Similarly you can probably use a script to redirect the user or possibly trigger a lightbox.

Bob

I'm really sorry to bother you again. I was wondering if you could let me know if this is the right way to set it up for changing the URL.

I added this to the top of the html form code:

<script type="text/javascript" language="JavaScript">
function addTabUrl()
{
document.companyresponse.action = '?chronoform=companyresponse&event=submit&#tabs-4';
}
</script>

Then, in the input tag for the submit button, I put

onClick="return addTabUrl();"

Since I don't know much about Javascript (I just pretty much copied what other tutorials said) I was wondering if you could tell me whether any of this is wrong or if there are any obvious problems that this will create. I did test it, but I want to make sure there aren't problems that I didn't find in my test.

Also, is it a bad idea to add the auto server side validation to all my forms (i.e. is there any reason not to use server side validation in addition to the Javascript validation)

Hi Uclabruins,

I wrote something similar for the ChronoForms Book in this article It might be useful here too:

Keeping our options open
Putting the URL in the Submit URL box works well, but has one drawback. If we try to use the form without the Squeezebox, the "Thank You" page will still display without the template and users will see a blank screen mainly.
To get round this, we need to check if the form is being called normally or modally. The easiest difference to spot is the tmpl=component in the URL. We can add a few lines of PHP to the Form HTML to detect this and set a hidden input value:

<?php
$modal = JRequest::getString('tmpl', 'false', 'get');
?>
<input type='hidden' id='modal' name='modal'
  value='<?php echo $modal; ?>' />

Then, we can use some JavaScript in the Form JavaScript box to read this and change the Form Action URL when the form is loaded:

window.addEvent('domready', function() {
  var modal = $('modal').value;
  if ( modal == 'component' ) {
    var url = $('ChronoContact_form_name');
    var action = url.getProperty('action');
    url.setProperty('action', action+'&tmpl=component');
  }
});

This script snippet checks to see if the modal hidden input is set to component. If it is, then it gets the form action URL and adds &tmpl=component to the end.
Now we can use the same form either normally or modally in the Squeezebox.

NB This is CFV3 code and will need tweaking for CFv4

Bob

I want to do something similar. I want to create a contact form inside sobipro.

Why did you feel like you needed to put it in a module?

Did this work for you?