Any reason this callback doesn't work in dash?

Question

In the callback I am including in this post, my goal is to return a tick mark from my dcc label component if the user enters valid inputs in the input components. No errors show up in the dash server but output label doesn't update when I enter valid inputs.

Label should be ✅ instead of "Invalid Active Hours or Preoperating Hours Time Span Format !" when :

Inputs with "Active Hours placeholder" is of the format HH:MM-HH:MM (10:00-22:00)
Inputs with Preop Span placeholder" is of the format MM (60)

The inputs in question are in the red square in the attached screenshot.

Screenshot

@app.callback(
    Output(component_id='activeHours_span_format', component_property='children'),
    [Input(component_id='monday_active_hours', component_property='value'),
    Input(component_id='tuesday_active_hours', component_property='value'),
    Input(component_id='wednesday_active_hours', component_property='value'),
    Input(component_id='thursday_active_hours', component_property='value'),
    Input(component_id='friday_active_hours', component_property='value'),
    Input(component_id='saturday_active_hours', component_property='value'),
    Input(component_id='sunday_active_hours', component_property='value'),

    Input(component_id='monday_preoperating_hours', component_property='value'),
    Input(component_id='tuesday_preoperating_hours', component_property='value'),
    Input(component_id='wednesday_preoperating_hours', component_property='value'),
    Input(component_id='thursday_preoperating_hours', component_property='value'),
    Input(component_id='friday_preoperating_hours', component_property='value'),
    Input(component_id='saturday_preoperating_hours', component_property='value'),
    Input(component_id='sunday_preoperating_hours', component_property='value')]
)

def weekday_activeHours_span_format_check(a1, a2, a3, a4, a5, a6, a7, p1, p2, p3, p4, p5, p6, p7):
                                      

    a1_val = a1[0:2] + a1[3:5] + a1[6:8] + a1[9:11]
    a2_val = a2[0:2] + a2[3:5] + a2[6:8] + a2[9:11]
    a3_val = a3[0:2] + a3[3:5] + a3[6:8] + a3[9:11]
    a4_val = a4[0:2] + a4[3:5] + a4[6:8] + a4[9:11]
    a5_val = a5[0:2] + a5[3:5] + a5[6:8] + a5[9:11]
    a6_val = a6[0:2] + a6[3:5] + a6[6:8] + a6[9:11]
    a7_val = a7[0:2] + a7[3:5] + a7[6:8] + a7[9:11]

    if (

    (
    a1 is not None and a2 is not None and a3 is not None and a4 is not None and
    a5 is not None and a6 is not None and a7 is not None and
    p1 is not None and p2 is not None and p3 is not None and p4 is not None and
    p5 is not None and p6 is not None and p7 is not None
    )

    and

    (
        a1_val.isdecimal() == True and ' ' in a1_val == False and len(a1_val) == 11 and
        a2_val.isdecimal() == True and ' ' in a2_val == False and len(a2_val) == 11 and
        a3_val.isdecimal() == True and ' ' in a3_val == False and len(a3_val) == 11 and
        a4_val.isdecimal() == True and ' ' in a4_val == False and len(a4_val) == 11 and
        a5_val.isdecimal() == True and ' ' in a5_val == False and len(a5_val) == 11 and
        a6_val.isdecimal() == True and ' ' in a6_val == False and len(a6_val) == 11 and
        a7_val.isdecimal() == True and ' ' in a7_val == False and len(a7_val) == 11
    )

    and

    (
    p1.isdecimal() == True and ' ' in p1 == False and p2.isdecimal() == True and ' ' in p2 == False and
    p3.isdecimal() == True and ' ' in p3 == False and p4.isdecimal() == True and ' ' in p4 == False and
    p5.isdecimal() == True and ' ' in p5 == False and p6.isdecimal() == True and ' ' in p6 == False and
    p7.isdecimal() == True and ' ' in p7 == False
    )


    ):
        return "✅"

    else:
        return "Invalid Active Hours or Preoperating Hours Time Span Format !"

⚠️ ⚠️ ⚠️ `"x" in "bar" == False` does not do what you think! Please see e.g. https://stackoverflow.com/questions/43677790/multiple-comparison-operators-in-single-statement-chaining-comparison-operators — Dima Tisnek, Feb 02 '22 at 01:02

score 0 · Answer 1 · answered Jan 27 '22 at 08:02

Assuming you don't have a placeholder for the value attribute for the inputs, then they are all None by default. This, in turn, will return False for your first if condition when you enter something into one of those inputs, as the remaining inputs will all still be None (eg. returning that message rather than the tick even if though the input may be correct):

if (a1 is not None and a2 is not None and a3 is not None and a4 is not None and
    a5 is not None and a6 is not None and a7 is not None and
    p1 is not None and p2 is not None and p3 is not None and p4 is not None and
    p5 is not None and p6 is not None and p7 is not None
    )

A workaround would be placing a temporary value by default into those inputs that isn't None and won't tamper with your logic or only checking the input that has just been changed only and not all of the inputs.

Any reason this callback doesn't work in dash?

1 Answers1