Forums

Hi Greyhead,

I am still using V4 on 2.5 and it works a dream for now, and upgrade is in the works.

I have a few forms at the bottom of pages and I have a fixed header at the top of my page. I have managed to get using JS the for to scroll into view upon captcha failure however I have been really struggling with how to control the position of .focus during JS validation. When there is an error the script focussed the field to the very top of the page and it is hidden by my menu.

I have look around in the forum alot and have tried to edit jvalidation.js, specifically the .focus field but whatever I try it doesnt effect the postition of the field being focussed on. Any tips or ideas to get the focus to be more in the middle of the screen as currently users dont even see the errors and I suspect they are bouncing.

Many thanks!

Hi sensison,

By default ChronoForms puts the JS validation errors just above the input boxes so my guess is that some other CSS on your page is moving them to be at the top. Possibly something that is affecting the 'relative' setting to be relative to the page rather than the form element???

Bob

Hi Greyhead, thanks for the reply, can I just say I am a huge fan of ChronoForms!

I think perhaps I explained a bit unclearly, the validation errors are appearing correctly, after the element in the form (not using the title setting) and thats all ok however when I click submit, the viewport is scrolled to the first field in the form but this is hidden behind my websites header. I am pretty sure its not the css but JS somewhere. Scrathching round on old posts I did see the post about editing the line containign .focus() in gvalidation.js but that doesnt work in V4 I dont think.

Is there an event for if errors are detected in the form? (not capthca) I found the technique by you I think which grabs the submit event and uses that to scroll the capthca into view. Which works very well it seems.

<?php $event = JRequest::getVar('event'); ?>
<?php if ( $event == 'submit' ): ?>
window.addEvent('domready', function() {
document.getElementById('form').scrollIntoView();
});

<?php endif; ?>

Could that be applied to an error event? Could it use getVar?
Becuase then I could just create an message to appear only when the form doesnt validate and then use JS to scroll it into view (if I put the message above the form)

Thanks alot!

Hi sensison ,

I'm confused, the scroll into view code is used when the form has been validated and submitted and is then re-loaded after an error is found - for example, from a captcha check or a server-side validation check.

The client side JavaScript validation is run when you click submit before the form actually submits. Those messages should appear above the individual inputs.

it might help if I could take a look at the form to see exactly what is happening?

Bob