Spry Validation Issues

Posted on 2011-05-05
Last Modified: 2012-05-11

I've been asked by a colleague to get a form working, not entirely when it stopped working if it has ever worked correctly, however I seem to be getting no where with it.

The form is split over 3 sections using hidden divs.  Within section 2 the submitter is asked a question.  Depending on the answer, different form fields appear.  The issue I'm having is not all the Spry validation is working as expected.

When the select list value is "none" then it should destroy the validation on the following fields within this section.  If the value is "air", it should create the validation for the arrival and departure information and destroy the hotel fields.  Else if it is "resideincountry" then it should create the validation for the hotel fields and destroy the validation for the arrival and departure fields.

I believe everything else is working but this, I've uploaded a zip file with the HTML, and associated script and images in the hope someone will be able to solve the issue.  I realise some the coding is probably not optimised so appreciate any advice with this too.

Thanks in advance.
Question by:john_hollings
    LVL 70

    Expert Comment

    by:Jason C. Levine
    Downloading and will look at it.
    LVL 70

    Accepted Solution

    Wow, that's a lot of javascript :)

    First things first, when I load the page with Firebug, an error appears:

    Syntax error, unrecognized expression: [@rel^="collapse-"]

    Can you check that and see what it causing it?  It might be breaking the rest of the script.

    LVL 5

    Author Comment

    Thanks for the comments, I know there is a lot of JS but unfortunately we run a site that does allow us to use server-side script.

    I have been using firebug but didn't see this error, I'll take another look and get back to you.

    Thanks again
    LVL 70

    Expert Comment

    by:Jason C. Levine
    Okay.  Let me know.

    We'll get this figured out but for validations this complex, I usually switch to the JQuery Form Validation plugin.  It doesn't tightly integrate into Dreamweaver but it does work a lot better (and with a lot less code).
    LVL 5

    Author Comment

    I've taken another look at the form in Firefox and cannot get this error message in FireBug.  To be honest I'm pretty new to using Firebug and all I've really used it for is to inspect elements.

    I run it through IE and found a couple of errors which I have corrected but these did not correct the issue.

    I've taken a look at jQuery Form Validation and it does seem simple enough however cannot see how this would work when certain fields validation need to be destroyed depending on the values selected by the submitter in a couple of the picklists.

    Section 1: works fine
    Section 2: if the user selects "resideInCountry" then only Hotel information is required.  If the user selects "Air" then Arrival and Departure information is required.
    Section 3: works fine, if the user selects "No" then they are prompted to submit the form. If they select "Yes" they are shown a number of additional fields which are required.

    I can't see how jQuery can destroy validation or build validation based on user selections, although I have only looked at it for about 30mins.
    LVL 5

    Author Closing Comment

    I've got the form working now, not entirely sure what I did, but managed to find a could of other JS errors.  Thanks very much for your help my colleague is extremely pleased.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now