Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mattia Cerantola 10 posts 30 karma points
    Jan 28, 2015 @ 11:29
    Mattia Cerantola
    0

    Umbraco Forms Validation for mandatory conditional fields

    Hi everyone.

    I'm trying to validate my umbraco form (version 4.0.0). My problem is that i need to submit a form which contains mandatory fields that could be not always visible because of some conditions.

    Example: I have a checkbox, if it's checked the user is shown a field, if not another one.

    The problem is that both of those field should be mandatory but only when visible, because otherwise the user cannot submit the form correctly (the other mandatory field and its error are hidden because the condition is not met).

    I tried to remove manually the "mandatory" class working by client side (web inspector) but the form still refuses to submit an hidden mandatory field.

     

    Any idea?

  • Dee 4 posts 54 karma points
    Mar 06, 2015 @ 13:32
    Dee
    0

    I am having the same issue (Umbraco Forms 4.0.1) aka form won't submit if mandatory fields are hidden due to conditional fields. This functionality was possible in Contour 3.0.23.

    @Mattia were you able to find a solution to this?

  • Joseph 59 posts 139 karma points
    Jun 23, 2015 @ 02:38
    Joseph
    0

    I've just encountered this issue and feel like it is a bug. Fields should only be mandatory if they are visible. Another way of looking at it might be that the Contour UI should not allow you to define a field that is both conditionally visible and mandatory at the same time.

    I've logged an issue in Youtrack for it here: http://issues.umbraco.org/issue/CON-781

  • Fredrik Esseen 589 posts 804 karma points
    Nov 17, 2016 @ 15:21
    Fredrik Esseen
    0

    This bug is still there in version 4.3.2. Has anyone made a workaround for this?

  • John Logan 17 posts 58 karma points
    Dec 08, 2016 @ 12:18
    John Logan
    0

    Hi all

    We have hit the same issue re a conditionally hidden mandatory field

    The way I worked around the issue is to make those fields disabled by adding a function to the umbracoforms-conditions.js file

    first add in a call via the show/hide function to setDisabledState and add the type param

    function handleCondition(element, id, condition, type) {
            //console.log(type + " " + id);
            var shouldShow = isVisible(id, condition);
    
    
            if (shouldShow) {
                //console.log("showing " + id + "\n");
                element.show();
                setDisabledState(element, id, type,false)
            } else {
                //console.log("hiding " + id + "\n");
                element.hide();
                setDisabledState(element, id,  type,true)
            }
    
    
    
        }
    

    add the type to the calls to this function

     for (fsId in fsConditions) {
            handleCondition($("#" + fsId), fsId, fsConditions[fsId], "Fieldset");
        }
    
      for (fieldId in fieldConditions) {
            handleCondition($("#" + fieldId).closest(".contourField"), fieldId, fieldConditions[fieldId], "Field");
        }
    

    Then add the functions setDisabledState and setDisabledStateMandatoryContourField

    function setDisabledState(element, id, type, disabled) {
    
            //gDebug("setDisabledState  type " +type,element,"green","white");
            //is this a fieldset or a form element?
    
            if(type == "Fieldset"){
                //gDebug("itterate over contourFields in contourFieldSet")
                element.find(".contourField").each(function () { 
                    //gDebug("contourField - ",$(this),"blue","white");
                    setDisabledState($(this), $(this).attr("id"), "Field",disabled);
                });
    
            }else if(type == "Field"){
    
               setDisabledStateMandatoryContourField(element,disabled)
            }
    
    
        }
        function setDisabledStateMandatoryContourField(element,disabled) {
           var isMandatory =  element.hasClass("mandatory");
           if(isMandatory){
               //element correseponds to contourField
                //so we need to find the form elements within the contourfield and disable them
                //gDebug("setDisabledStateMandatoryContourField ",element,"red","white");
                element.find("input").prop('disabled', disabled);
                element.find("textarea").prop('disabled', disabled);
                element.find("select").prop('disabled', disabled);
    
    
    
           }
    
    
    
        }
    

    It might not be the most elegant way of fixing it but it seems to work for me

    Cheers J

    ps - the commented out gDebug is just our local debug code feel free to ignore remove replace with console.log etc

  • Fredrik Esseen 589 posts 804 karma points
    Feb 09, 2017 @ 10:59
    Fredrik Esseen
    0

    Ive tried your solution, John, but the fields are still validating even though they are hidden and disabled.

    It seems Umbraco Forms is doing some validation on submitting as the page reloads, disregarding the changes in the DOM.

  • John Logan 17 posts 58 karma points
    Feb 14, 2017 @ 15:21
    John Logan
    0

    Hi Fredrick

    Have a look at

    \Umbraco\App_Plugins\UmbracoForms\Assets\umbracoforms.js

    this should be the validator script for umbraco forms

    I would suggest checking the latest version of this file to see it has been updated from the one you have

    What version of Umbraco forms are you using?

    You said the form was submitting on but then returning with errors - this is a slightly different error than what I was getting

    For me the form was not submitting as there were errors and so I had to set the hidden ones as disabled

    For you it sounds like its the server validation that is getting in the way

    I didn't have to do anything to that to make mine work

    Cheers J

  • Aaron 21 posts 92 karma points
    Mar 02, 2017 @ 16:10
    Aaron
    0

    I can confirm what Frederik Esseen has said.

    The js updates that John posted do not resolve the problem - I have also tried dropping mandatory class and validation attributes.

    The form submits and the page reloads regardless of dom change.

    We have a client now with a live form that will not submit (albeit rarely used).

    Is there any way to raise this issue as urgent with Umbraco Forms team to instigate a patch?

  • OleP 47 posts 220 karma points
    May 08, 2017 @ 11:26
    OleP
    0

    You can report issues directly to Umbraco here: http://issues.umbraco.org/ . However this bug is already reported here http://issues.umbraco.org/issue/CON-781 . I'm dealing with the same issue atm, idk if the newly released v 6.0 fixed the issue.

Please Sign in or register to post replies

Write your reply to:

Draft