Page 1 of 1
Problem using jquery validate plugin
Posted: Sat Mar 23, 2013 1:09 am
by barb woolums
I have a contact form on my website using the validate plugin.
It has been working fine for years, until just recently. I haven't changed the form itself, but I did update to jquery 1.8.3.
Now the validation images are showing up in the wrong place, and for the wrong fields. I can't figure out how to remedy this.
You can try it out at
http://webrecipemanager.com/index-5.php
Re: Problem using jquery validate plugin
Posted: Sat Mar 23, 2013 3:42 pm
by mecha_godzilla
Hi,
The form does appear to be working correctly but the position of the images and "Required" messages is out - the last image and message for the Captcha is off-screen somewhere, but if you complete each field in the form individually you'll see that they validate correctly. Well, mostly anyway - if you type a name in and then click submit, the script shows the green check mark as expected, but if you delete the name and then click submit you still see the green check mark even though it now says "Required", but that's probably just the form validation script not working as expected.
In your form you have a <div class="status"></div> to the right of each text field - because this <div></div> is empty when the page first loads, there might be an underlying problem with the layout when jQuery populates it - perhaps try putting a default value in this layer that will be displayed when the page first loads to see if it's incorrectly positioned from the outset or whether the problems start when jQuery tries to write HTML to it. The problem might also be that jQuery doesn't know which element <div class="status"></div> belongs to, so it's just randomly positioning wherever it can in the document object.
Just on a final point, the first <div></div> that you use in the form for the name field looks like this
whereas the rest look like this
Is there a reason for that? It might not make any difference, but I would expect all of the fields to be styled in the same way. Also, your overall page layout looks broken to me in Firefox and Safari - when you go to the "Features" or "FAQs" pages, the sidebar on the left extends too far down and overwrites the footer. On the contact page, when the form validation script adds the icons and messages it pushes the overall page layout down and there is a gap between the sidebar and the footer through which the background can be seen. I should add that I'm not being deliberately pedantic

If the overall page layout isn't working quite right then this might (in part) explain why the form validation script isn't working properly.
HTH,
Mecha Godzilla
Re: Problem using jquery validate plugin
Posted: Sat Mar 23, 2013 11:58 pm
by barb woolums
Hi,
Thanks for your great response.
The extra ilabel class is necessary as it keeps the top two fields together vertically. This has always been there and it all used to work perfectly as it is, that's why I am confused.
I tried putting some initial text in the status divs and they ended up in the wrong place from the outset.
As for the sidepanels, thanks for pointing that out. The features and faq pages look correct to me, maybe the page is affected by different resolutions. That's not good. The sidepanels have a background image, which is a real pain, as every time I change any content I have to resize the div, and to nmake this worse, I have to change it differently for differnt browsers and maintain 4 stlye sheets. I would love to find a better way of managing this.
Any Ideas?
Re: Problem using jquery validate plugin
Posted: Sun Mar 24, 2013 1:17 am
by barb woolums
I have now fixed the validation issues.
Would still like some help with the sidepanel design though.
Re: Problem using jquery validate plugin
Posted: Sun Mar 24, 2013 11:27 am
by mecha_godzilla
I'll take a look at your page design this evening if I get time - it sounds like you just need to simplify the layout so that it's easier to maintain. Don't forget that you can have one background overlaying another if you need to, rather than having to try and place spot graphics as image elements over the top of (say) a gradient background. You need this kind of technique if you want to take a sky graphic, blend it to a background colour and then have a landscape graphic at the bottom of the page that also blends in with the background colour.
M_G
Re: Problem using jquery validate plugin
Posted: Mon Mar 25, 2013 6:00 am
by barb woolums
Hi m_g
Based on your suggestions I have totally reworked my sidebars. Now I only need 2 stylesheets - yay - of course IE needs a special one
Could you please have a quick look and make sure there are no overlaps or gaps.
Thanks in advance
Re: Problem using jquery validate plugin
Posted: Mon Mar 25, 2013 4:15 pm
by mecha_godzilla
The site looks fine in Firefox but in Safari the sidebar is anchored to the bottom of the page and overlays the footer - I'll take a look at your HTML in more detail in a moment but it happens when I view the page from the site itself, not from a local copy of the same page on my machine. It looks like you're using a combination of <div></div> and <table></table> elements to align everything - that's fine, but it's usually best to create <div></div> containers for each section of the page and then use table layouts inside them for any tricky positioning problems, CSS vertical alignment being the main one that I seem to run into no matter how many times everyone tells me it works - which it *clearly* doesn't

Of course, some designers will probably also tell that you shouldn't be using table elements at all for layout purposes, but that's entirely up to you - there are valid concerns in this respect relating to accessibility of pages, but I suggest that you use what works and you can always move over to table-less layouts if you need to - keeping in mind that tables can and should still be used for their original purpose where appropriate.
M_G
Re: Problem using jquery validate plugin
Posted: Mon Mar 25, 2013 6:12 pm
by Benjamin
I recommend changing to a sans-serif font with 1.6em line height. Please see the attached.
Re: Problem using jquery validate plugin
Posted: Mon Mar 25, 2013 8:53 pm
by barb woolums
That's wierd, looks fine on my version of safari, what version do you have?
Re: Problem using jquery validate plugin
Posted: Mon Mar 25, 2013 9:04 pm
by Benjamin
The picture I posted is what it would look like if you made those changes. Here's what it looks like now:
Re: Problem using jquery validate plugin
Posted: Mon Mar 25, 2013 10:06 pm
by barb woolums
Thanks Benjamin, that does look nicer.
Re: Problem using jquery validate plugin
Posted: Mon Mar 25, 2013 10:59 pm
by Benjamin
No problem, I think I changed the font size to 13px also.