Forums

J! 1.5.13
ChronoForms 3.1 RC5.5

My form is a long list of products plus contact information fields, so you have to scroll the page.
I'm using MooTools library to validate contact fields which are located in the bottom of the page.

Now when I leave one required field empty and hit submit button, in Firefox the page stays in place and doesn't jump anywhere and displays the validation error message. But with Internet Explorer 8, 7 & 6, the page jumps up and you can't see a) contact fields and b) the validation error message. You have to scroll down to see them.

This little bug in the behavior has caused me a lot of headache, because customers think now that form is submitted, and afterwards they call to our sales department and wonder where's their order confirmation.

Is there any solution for this?

Hi OCS,

The 'best' solution for this might be a multi-page form to separate out the contact details and possibly break up the long list.

There is a LiveValidation option to put the error message in a specific location:

insertAfterWhatNode (optional) - {mixed} - reference or id of node to have the message inserted after (DEFAULT: the field that is being validated)

but I don't know now to implement this in ChronoForms :-( It's probably possible but may require some code hacking.

Bob

Unfortunately I don't have the time to change the form to tabbed in the near future. Too busy with other projects.

If I understand correctly, this is a LiveValidation issue? Maybe I just have to contact the author of that library.

Hi OCS,

I think that the LiveValidation bit is OK - it's a question of how to implement the functionality in a ChronoForms form. I have a long form to work on this week, I'll see if I can get it working.

Bob

I was thinking of adding a javascript alert dialog when user submits form and validation fails.

How could this be implemented?

Hi OCS,

Sorry, I don't know. You might find something in the LiveValidation documentation.

Bob

Well I've tried for an hour now and I can't figure out how could I get a single boolean answer from validation. Problem is that LiveValidation adds validation to each field and if I assign onInvalid function to each of them, of course it fires that function to each invalid field.

I would need just one alert-message when validation fails. Does anyone have any ideas?

Hi OCS,

Could you check all of the inputs for the LV_invalid_field class?

Bob

The first problem I ran into was that I can't fire up my own function on form.onsubmit-event if Livevalidation fails. I tried to attach a function in Form tag attachment -field (onsubmit="formCallBack()").

This just goes beyond my knowledge as I've tried to understand how the Livevalidation works.

Hi OCS,

Attaching a function like that should work OK. I'd preobably do it with the MooTools addEvent but either should be OK.

Can you fire an onsubmit alert?

Bob

Onsubmit event handler isn't triggered if validation fails because Livevalidation interrupts it.

I'll have to look into MooTools addEvent.

Hi OCS,

Yes, that makes sense, try attaching an event to the submit button onclick.

Bob

Now I managed to attach a function to onsubmit event with MooTools addEvent.
And this function is executed after Livevalidation. Any ideas how to check if validation is failed?

Hi OCS,

Could you check all of the inputs for the LV_invalid_field class?

Bob

Yes, i managed to solve this problem. The solution isn't necessarily pretty but works. This is the code in Form javascript field:

window.addEvent('domready', function() {

$('ChronoContact_form').addEvent('submit', formCallBack);

});

function formCallBack() {

var fHit = false;

// Check all required fields if they have class "LV_invalid_fied"

('field1,field2,field3').split(',').each(function(field)
{
if($('ChronoContact_form').getInputByName2(field).hasClass('LV_invalid_field') == "true") { fHit = true; };
});

// If there's one or more invalid fields, display error message for Explorer users

if(window.ie) {
if(fHit) { alert("Message here."); }
}
}