Forum Discussion

_anomDiebolt_'s avatar
_anomDiebolt_
Qrew Elite
8 years ago

How to Validate Form Fields with Pattern and Display Message Bubbles?

How to Validate Form Fields with Pattern and Display Message Bubbles?

Here is a demo using the HTML5 "Constraint Validation API" for an email field:

Validate Me With Message Bubbles ~ Add New Record
https://haversineconsulting.quickbase.com/db/bmqdshqgw?a=nwr

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=579



Notes:

(1) Only works in Chrome at this time.

(2) A very simple regular expression was used to validate an email field however the technique is very general and any pattern could be matched (phone number, account numbers etc).
  • MCFNeil's avatar
    MCFNeil
    Qrew Captain
    8 years ago
    You should use a URL encoding service that can apply some metrics so you know how many people click on your links, so you know what is popular and not.  

    Could be cool to see and add a "Popularity" to your pasties
  • MCFNeil's avatar
    MCFNeil
    Qrew Captain
    8 years ago
    Does that give you IP geo locating like goggle analytics?
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    8 years ago
    Okay I decided to use fingerprint2 to track all my visitors. If you think you are a special snowflake you are correct. Your browser reveals you as being statistically unique based on all the junk you have installed and configured:

    https://jsfiddle.net/dcheLfpq/embedded/result,js,resources/

    If you hash the json returned by fingerprint2 you will get an identifier unique to each visitor.
  • MatthewBarrett's avatar
    MatthewBarrett
    Qrew Member
    8 years ago
    I hate to change the subject, but I have a question back on the validate form fields with pattern and display message bubble subject.  How do you correct from invalid to valid entry?  I get the same result in my page as I do in the example page.  Once the field is flagged as invalid it continues to report as invalid even after correction.  Should I be using a change listener in the IOL page?
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      8 years ago
      There is a bug in the code that I will look at. I did this very rapidly just to introduce a new idea.
    • _anomDiebolt_'s avatar
      _anomDiebolt_
      Qrew Elite
      8 years ago
      I probably have a workaround that I will post after some testing. Luckily support for form validation has improved over time:

      https://caniuse.com/#feat=form-validation

      The tricky part is that the form validation was sort of designed to validate the entire form at the point in time just before it was submitted. What would be more appropriate for QuickBase users is to validate a field immediately after receiving input. My quick research found a workaround but I have other things to do at the moment so stay tuned.