Conditionally 'Required' fields – How to? JS solution needed

Home Forums Quform WordPress Conditionally 'Required' fields – How to? JS solution needed

This topic is: resolved
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #24963
    katw
    Participant

    I have a field that is only mandatory if a specific checkbox has been checked.

    This field is always visible and should remain so; therefore a conditional logic using show/hide field will not suit.

    The user can fill this field in optionally (ie not required) in most situations BUT if they select a specific checkbox this field becomes mandatory.

    Question:

    Is there a way to programatically toggle or set the ‘required’ state for fields for submit form validation?

    I need to do this in client-side JS.

    #25003
    katw
    Participant

    I see you add a ‘required’ CSS class to fields and don’t use ‘REQUIRED’ parameter on form fields.

    Given this,

    If I set the field as required in the settings and set it up as if it is always expected (ie set validators and error message text)

    Then programatically remove the ‘required’ class… when it is not mandatory…

    Will QuForm ‘On submit’ ignore the required settings and allow the form to go?

    If so I have a solution I could use.

    Please advise if above would work.. or provide a solution if possible.

    #25006
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #25426
    katw
    Participant

    To re-enable the validator for the field do I reverse the code like this?

    $form->getElement('quform_1_4')->addValidator('required');

    #25435
    katw
    Participant

    I am struggling with using the ‘quform_pre_validate_1’ hook.

    I can’t seem to access values in a hidden field (ID 1_62).

    The value in this field will dictate whether I remove or add the ‘required’ validator.

    I have tried using:

    $errorValue = $form->getElement('quform_1_62'); 
    
    if ($errorValue <>0) {
        $form->getElement('quform_1_4')->addValidator('required');
    } else {
        $form->getElement('quform_1_4')->removeValidator('required');
    }

    AND

    `$form = $element->getForm();
    $errorValue = $form->getValue(‘quform_1_62’);

    if ($errorValue <>0) {
    $form->getElement(‘quform_1_4’)->addValidator(‘required’);
    } else {
    $form->getElement(‘quform_1_4’)->removeValidator(‘required’);
    }`

    BTW the quform_1_4 element is a radio button group.

    quform_1_62 is a hidden field; one I need to check the value to determine if required is needed for the radio group.

    General Questions:
    ———————-

    Is the getElement(reference name) different when handling radio button groups?

    Do I need to convert the hidden field $errorValue to a number before comparing?

    Why do custom validators use $form->getValue but pre_validate hooks use $form->getElement?

    • This reply was modified 5 years, 11 months ago by katw. Reason: Tried to get second code block to show as code, but not working
    #25471
    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    • This reply was modified 5 years, 11 months ago by Ally.
    #25481
    katw
    Participant

    Thanks Ally.

    The more frustrated I got with the validator not functioning the more I started doubting my understanding of getElement and getValue.

    I was on right track at start but didn’t know empty field aborted the validation exercise, so got myself tied in knots.

    Thanks for the extra info.

    CLOSE TICKET

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.
Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy