Problem using jquery validate plugin

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Problem using jquery validate plugin

Post 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
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Problem using jquery validate plugin

Post 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

Code: Select all

<div class="label ilabel">
whereas the rest look like this

Code: Select all

<div class="label">
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 :mrgreen: 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
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Problem using jquery validate plugin

Post 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?
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Problem using jquery validate plugin

Post by barb woolums »

I have now fixed the validation issues.

Would still like some help with the sidepanel design though.
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Problem using jquery validate plugin

Post 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
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Problem using jquery validate plugin

Post 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
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: Problem using jquery validate plugin

Post 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 :mrgreen: 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
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Problem using jquery validate plugin

Post by Benjamin »

I recommend changing to a sans-serif font with 1.6em line height. Please see the attached.
Attachments
Screen Shot 2013-03-25 at 5.57.26 PM.png
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Problem using jquery validate plugin

Post by barb woolums »

That's wierd, looks fine on my version of safari, what version do you have?
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Problem using jquery validate plugin

Post by Benjamin »

The picture I posted is what it would look like if you made those changes. Here's what it looks like now:
Attachments
Screen Shot 2013-03-25 at 9.03.16 PM.png
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Problem using jquery validate plugin

Post by barb woolums »

Thanks Benjamin, that does look nicer.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Re: Problem using jquery validate plugin

Post by Benjamin »

No problem, I think I changed the font size to 13px also.
Post Reply