How to validate the dcc.Dropdown Input?

Dash Python
1

Hi Guys,

I’m building a Dropdown that I want to validate and don’t accept empty or None on it when clicking on “submit”.

I tried to find a way to do it, but I didn’t find a good and clear way to do it.

Someone can help me with this problem?

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.Div([
        html.Div(
            dcc.Dropdown(
                id='demo-dropdown',
                options=[
                    {'label': 'New York City', 'value': 'NYC'},
                    {'label': 'Montreal', 'value': 'MTL'},
                    {'label': 'San Francisco', 'value': 'SF'}
                ],
                value=[]
            ), className="four columns"),
        html.Div(html.Button('Submit', id='btn-submit'),
                 className="two columns"),
    ], className="row"),

    html.Div(id='dd-output-container')
])


@app.callback(
    Output('dd-output-container', 'children'),
    [Input("btn-submit", "n_clicks")],
    [State("demo-dropdown", "value")])
def update_output(btn, value):
    print(btn, value)
    if btn is None:
        raise PreventUpdate
    else:
        pass
    return 'You have selected "{}"'.format(value)


if __name__ == '__main__':
    app.run_server(debug=True)
1 Like
2

Hi @kabure

You are testing btn, which is n_clicks…
Try: if value is None:

3

Hi dear, thank you very much for your attention… I have solved the problem doing something similar to what you suggested; It’s now working well.

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    html.Div([
        html.Div([dcc.Dropdown(
            id='demo-dropdown',
            options=[
                {'label': 'New York City', 'value': 'NYC'},
                {'label': 'Montreal', 'value': 'MTL'},
                {'label': 'San Francisco', 'value': 'SF'}
            ]
        ),
            html.Div(id="valid-dropdown", style={"color": "red", "fontSize": "12px"})], className="four columns"),
        html.Div(html.Button('Submit', id='btn-submit'),
                 className="two columns"),
    ], className="row"),

    html.Div(id='dd-output-container')
])


@app.callback(
    Output('dd-output-container', 'children'),
    [Input("btn-submit", "n_clicks")],
    [State("demo-dropdown", "value")])
def update_output(btn, value):
    print(btn, value)
    if (btn is None) or (value is None):
        raise PreventUpdate
    else:
        pass

    return 'You have selected "{}"'.format(value)


@app.callback(
    Output('valid-dropdown', 'children'),
    [Input("btn-submit", "n_clicks")],
    [State("demo-dropdown", "value")])
def update_output(btn, value):
    print(btn, value)
    if btn is None:
        raise PreventUpdate
    else:
        pass

    if value is None:
        return "Dropdown can't be an empty value."
    else:
        return None


if __name__ == '__main__':
    app.run_server(debug=True)