`with ui.stepper().props('vertical').classes('w-full') as stepper:
with ui.step('User Basic Information'):
with ui.grid(columns=1):
f_name = ui.input(label='First Name', validation={'invalid':lambda value:len(value)>2}).classes('capitalize').props('required=required')
m_name = ui.input(label='Middle Name').classes('capitalize')
l_name = ui.input(label='Last Name', validation={'invalid':lambda value:len(value)>2}).classes('capitalize')
sheetroll_num = ui.input(label='roll', validation={'invalid':lambda value:len(value)>4})
with ui.grid(columns=2).classes("place-items-center gap-8"):
gender = ui.label('Gender').classes('capitalize')
gender = ui.select(['Male', 'Female'], value='1')
with ui.stepper_navigation():
ui.button('Next', on_click=stepper.next)
with ui.step('Login Credentials'):
with ui.grid(columns=1):
username = ui.input(label='Email(Username)')
password = ui.input(label = 'Password')
ui.button(on_click=create_user, icon='add').props('flat').classes('ml-auto')
with ui.stepper_navigation():
ui.button('Done', on_click=lambda: ui.notify('Yay!', type='positive'))
ui.button('Back', on_click=stepper.previous).props('flat')
I want to use next button stepper only if first stepper form/input field is filled (not blank).
Ideally I want to use input/form validation, check if input field is empty or not and go to next step only if form is validated or input field is not empty.