Prevent validation on hidden required fields

  • pawanahluwalia

    (@pawanahluwalia)


    3 years, 1 month ago

    Hi,

    How can I prevent validation on required fields which have been hidden?

    Suppose I have:

    [radio field1 “A” “B”]

    Selecting Option B unhides a <div> section using JavaScript. Selecting Option A hides the <div> section.

    The <div> section contains required fields e.g. another set of radio buttons or a required text field.

    On selecting Option B, the form should validate the previously hidden fields as normal.

    On selecting Option A, those fields remain hidden and should not be validated and should not prevent the form being submitted.

    Unfortunately, that’s not the way validation currently seems to work. The form tries to validate all fields whether they are hidden or not and prevents the form being submitted

    I would be grateful for any tips on how to solve this issue.

    Many thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    3 years, 1 month ago

    Where can we see the website in question?

    Thread Starter pawanahluwalia

    (@pawanahluwalia)

    3 years, 1 month ago

    I don’t really want to post my website link here.

    However, let me give you more details. I am currently using the Conditional Fields PRO plugin to achieve the desired effect, and it works fine. The form code is:

    How did you hear about us?
[radio Reference "Online Search" "Referred by a relative/friend/colleague"]

[group Referrer]
Please give the the name of the person who has recommended you.
[text* ReferrerName]
[/group]

Do you currently use a similar service?
[radio Other "No" "Yes"]

[group OtherService]
Do you intend to continue using the other service provider also?
[radio serviceprovider "No, we will use you only." "Yes, we plan to use both."]
[/group]

    The conditional logic used is:

    show [Referrer] if [Reference] equals “Referred by a relative/friend/colleague”
    show [OtherService] if [Other] equals “Yes”

    This code ignores hidden fields in the validation process somehow.

    I am trying to cut down the number of plugins I am using. I feel I could achieve the same results by doing things differently and at the same time allow me to tailor things more to my requirements.

    So, I have replaced the [group] code to a <div>, e.g.:

    <div id=”Referrer”>
    Please give the the name of the person who has recommended you.
    [text* ReferrerName]
    </div>

    I am then controlling the visibility of these with JavaScript. It all works fine. The only thing not working is the validation aspect. The form is saying some fields are incomplete. These are the ones that are hidden. I just need a way for the validation process to ignore these hidden fields (i.e the ones within the hidden <div> section).

    Thanks

    [Moderator note: Please, No bumping].

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Prevent validation on hidden required fields’ is closed to new replies.