How to validate form input value realtime?

[Miwa]

Hello,

Is it possible to validate form input value realtime, especially to check if some word exists in db or not?

If this is impossible or pain in the neck work, how can I make the error message popup through server connection’s “Validate Data” ?

Thanks,

[Philip_J]

Real-time validation works but only for the validation types you can select in App Connect.

For checking a DB record it happens as per the steps you set out in the server side validation. As for messaging, that should work no worries when the submit the form, check this post for some detailed info:

Validation - Working with Server Side Validation and Customising Validation Feedback

I’ve just spent some time looking at how to customise the world of input validation in Wappler. It was a bit of a journey, so I thought I’d document what I have discovered so far here to help others and get feedback which may enhance my knowledge! Client Versus Server Validation So validation can happen on the client side or the server side. On the client side, the feedback is instant, as the user types. On the server side, the validation occurs when the user clicks on a submit button. Ther…

[Miwa]

Thanks, I realized it should not be realtime validation, because it causes too many server requests for example one request by one letter…

Now I would like to add this validation when I click the “NEXT” button in the multi steps form…do you have any tips to add actions on dynamic events?

[Philip_J]

I haven’t had to do that myself, but i would imagine that you would need to set up your server action file so that when you click NEXT, that it submits part of the form you want to check and that includes a validation step in the action file.

I’m sure its easy enough to to do if you play around with it, but others who’ve done it might have better advice.

[Miwa]

thank you so much, I try!!

[Miwa]

Hope some one can help me.

I set “Validation Data” like below.

But here at dynamic events (below image), I don’t know where and how to set validate data properties’ name “eventname_validation”…

thanks,

[Miwa]

I still get 400 bad request error on the browser with the following settings.

and

dmx-on:click="run({condition:{if:`(serverconnect2.status == 403)`,then:{steps:{'bootbox.alert':{message:`serverconnect2.lastError.message`,title:`serverconnect2.lastError.response`,buttons:{ok:{label:'OK',className:'btn-primary'}}}}},else:{steps:{run:{action:`steps.setValue((steps.value + 1))`}}}}})"

Is there any hint?

[Miwa]

Hi @Teodor,

I found you explained this one.

Validating multi-step form

Hello @Seanhoots You can add validation to your inputs, and disable the next button also if an input is invalid. Example: The input has an email validation rule applied: [Screenshot_22] Then you can disable the button, when the input is empty or invalid: [Screenshot_23] Result: [validator]

I would like to do the similar thing, I want to check if “eventname” exists in db before going to the next step in multi steps form, like my questions above. how can I solve this problem? I still get 400 bad request error.

[ben]

Will this help you?

Check if a Database Record Already Exists Before Inserting a New Entry

[Miwa]

Hi @ben,

thanks, I’ve already checked this documentation, but isn’t this for entire form submit? I would like to do this record check in one step. So I don’t know how to add the condition on the “NEXT” button. btw, the below code didn’t work.

@Miwa

dmx-on:click="run({condition:{if:(serverconnect2.status == 403),then:{steps:{'bootbox.alert':{message:serverconnect2.lastError.message,title:serverconnect2.lastError.response,buttons:{ok:{label:'OK',className:'btn-primary'}}}}},else:{steps:{run:{action:steps.setValue((steps.value + 1))}}}}})"

[caleb]

Have you get an answer for this? Also trying this one. I’ve spent around 6hours trying to make this work without any success. I did not find anything that I understand.

[mebeingken]

Here’s a thread with a couple options.

Trigger form validation

I had to do my own new multi step form yesterday and tried another approach. This time I used a single form that has containers for each step that I show/hide as needed. The “next step” buttons are submit buttons. The form action is dynamically set—for all but the final submit, the form action is set to the empty “just success” api. Then on the success of the form I move to the next step, etc. Validation is then also dynamic—required fields are only required if the step is currently visible. I…