I have a modal which contains a form with required fields. Is there a way to force validation before submitting the form? I’ve made them required fields in appconnect, but the validation doesn’t occur until the form is submitted. I would like the user to know that the field is required before they enter anything into the field. How do I do that?
Thanks,
Rick
Hmmmm, I suppose you could add an onClick attribute to the link that opens the modal and have it submit the form as well. That way the form modal would open up with the form already validated.
But personally I just use the form field help text to say it’s required.
i was thinking something like an app flow which would check the validation message of the field, then stop executing if it fails validation. That didn’t work for me though, not sure I did it right.
Did you give my suggestion a try, Rick? Only takes a few seconds to set up. Curious if it works.
yes that did work. It shows all the fields with their validation statements which is very helpful. I have a “NEXT” button instead of a submit button on the modal. Is there a way to stop the flow or disallow the next button until all of the validations have been exhausted? I submit the form elsewhere after another modal is shown where the submit button is at.
Thanks for your help so far, I’m better than I was.
Im confused, my forms all validate instantly, so as I go from one form field to another it updates, in fact I find it to be quite a pain, as i will have an email field and the user starts typing their email address, and it says it is invalid as they enter the first character.
So not sure why yours is reacting differently.
Going to test one on my side to make sure I have not gone nuts.
i’ve not seen that instant behavior. That is what I’m looking for actually. Go figure,
Hmm, i am still testing, but yes, a new form with the latest Wappler is doing things different with validation than I am used to, will let you know what I find in a moment.
Just make the form field validate on the keypress
Quick edit value changed not keypress keypress is one character behind for example a min 5 requirement only goes registers on 6
value changed is the exact 5
Well I just tested and Wappler must have changed something, as I looked back at a site done in Wappler about 8 months ago, and this is how it worked, which I actually did not really like.
Screen Recording 2021-04-29 at 20.27.59
Your code will land up something like this.
<form id="form1" method="post" is="dmx-serverconnect-form">
<input id="text1" name="text1" type="email" class="form-control" placeholder="Enter your email address here." required="" data-rule-email="" dmx-on:input="text1.validate()">
</form>
The dmx-on:input="text1.validate()" does exactly what you want.
The reason I chose to use on Input over on Keypress is because of forms that Auto complete based on the browser.
If the fields are all on keypress on Auto Complete hops in and fulls in your name and email and address, then it has not pressed any Keys, nor clicked, nor altered focus in my thinking, while it has still altered the input.
Well thats my thinking anyway.
keypress was just my first thought but value changed works better than keypress, iv’e not used auto complete much but I think value changed should be okay with it just tried this and value changed doesn’t work with auto never knew this (still learning myself) thanks for the useful info @psweb
thks
The form validation was changed about 2 months ago I think.
The auto-validation was actually a bug, which no one reported for a long time. Once it caught the attention, it was fixed.
The form no longer auto-validates. Once you submit a form, and there are errors, now each field gets validated on data change.
Brilliant, thanks for confirming that Sid, I was wondering when they made the change to it.