I would like the entry field to show visual cue to the user when input is missing upon data validation during the save in the Xojo2023r4 web app.
Using “form-control is-invalid” would change the look of the entry field.
How would I be able to do it from Xojo, using java script?
Maybe there is a different approach?
Here’s an example project with a simple subclass of WebTextField called WebTextFieldValidated. It has an enumeration called States with the following values:
And a State as States property.
This and many more features are built in to GraffitiTextField, and you’d probably greatly benefit from using that if you’re doing extended validation of data or simply want a lot more functionality with less work.
Anthony,
It all sounds very promising, I am going to download it shortly and look around and what can I learn from it. Thanks a lot.
One more thank you. This is exactly what I was looking for.
Great. Please mark the solution.
nice !
how would you add a property to enter the valid and invalid-feedback text ?
Do you want something like this?
from what I see that needs an extra DIV with the corresponding class (valid-feedback/invalid-feedback).
absolutely… and the extra div I don’t see how to have it without a websdk ?
also how to add the required property ? how to simulate a javascript submit ?
One problem will be moving other objects below as regular position uses left, top, etc. and not divs from other controls. So no simple solution.
That type of validation is done with the <form> element using browser validation, so you’d actually need quite a bit of work to implement the additional valid-feedback and invalid-feedback elements and have them operate the way you’d like. Or just make a WebTextFieldWithValidation container that has a label which you show/hide/style based on the state.
Required is largely useless in the Xojo context as you aren’t performing actual form submissions and using client-side validation. Any validation occurs server-side where you can report that a field is required statically in the UI or upon validating the data before conditionally carrying out whatever operation your Xojo code is meant to perform.
Event buttonSubmit.Pressed()
if fieldEmail.Text = "" then
labelInvalid.Visible = True
return
end if
doSomething()
End Event
And I have to caution against making many heavy modifications to the DOM of framework Web controls outside of the features they provide. They may be re-rendered by the framework causing all of those changes to be discarded.
There is already a Feature Request, from Alberto:
https://tracker.xojo.com/xojoinc/xojo/-/issues/70906
just voted for it …