Discussions

Expand all | Collapse all

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

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

    Top
    Contributor
    Posted 04-19-2017 17:25
    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

    ">https://d2r1vs3d9006ap.cloudfront.net/s3_images/1584965/RackMultipart20170419-16470-12r3cvn-ascreenshot_inline.jpg?1492622763">

    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).


  • 2.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Top
    Contributor
    Posted 04-19-2017 18:56
    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


  • 3.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Top
    Contributor
    Posted 04-19-2017 19:05
    Nay I am going to turn on my IOL / BOL / SW based logger and my panopticlick tracker:

    Panopticlick
    https://panopticlick.eff.org/


  • 4.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Top
    Contributor
    Posted 04-19-2017 19:09
    Does that give you IP geo locating like goggle analytics?


  • 5.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Top
    Contributor
    Posted 04-19-2017 19:16
    I will add ip tracking as well as evercookie & supercookiesPanopticlick fingerprints your browser's plugins, extensions, fonts, headers sent etc.

    https://panopticlick.eff.org/about

    It is an old but reoccurring meme - All Your QuickBase Are Belong to Us

    https://www.youtube.com/watch?v=8fvTxv46ano


  • 6.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Top
    Contributor
    Posted 04-20-2017 12:09
    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.


  • 7.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Posted 02-19-2018 20:52
    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?


  • 8.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Top
    Contributor
    Posted 02-20-2018 12:17
    There is a bug in the code that I will look at. I did this very rapidly just to introduce a new idea.


  • 9.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Silver
    Contributor
    Posted 02-20-2018 12:20
    yes, I have noticed the same bug as Matthew noticed.


  • 10.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Top
    Contributor
    Posted 02-20-2018 14:17
    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.


  • 11.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Posted 02-20-2018 16:37
    Thank you!  I'm tired of having invalid email addresses entered in the email address fields.  I was thinking about using the keyup and replace method to eliminate unacceptable characters, but then I'd still need a formula field to check if the character string created something similar to an email address.

    I'm attempting to create a pattern to cover both problems at once. Here's where I am now, which seems to catch it as a valid email address, but won't release after a fix when it was invalid first:

    (function(){

      var dbid = "mydbid";
      var dbidTable1 = "mytbid";
      var apptoken = "myapptoken";
      $.ajaxSetup({data: {apptoken: apptoken}});

      var querystring=document.location.search;

      if(/a=er/i.test(querystring) || /a=nwr/i.test(querystring)) {

        $("#_fid_6").attr({
            pattern: "^((([!#$%&'*+\-/=?^_'{|}~\w])|([!#$%&'*+\-/=?^_'{|}~\w][!#$%&'*+\-/=?^_'{|}~\.\w]{0,}[!#$%&'*+\-/=?^_'{|}~\w]))[@]\w+([-.]\w+)*\.\w+([-.]\w+)*)$",
            required: "required",
            oninvalid: "setCustomValidity('Please use the format: xxxx@yyy.zzz')"
          });


        })
       
      } 

    })();

    My other thought was to use the keyup and replace with a target field that set as true or false whether the pattern matched.


  • 12.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?

    Top
    Contributor
    Posted 02-20-2018 16:42
    I would not go crazy with the email regexp - it buys you nothing.

    There are simpler ways to just check the validity of the entered email and provide feedback. My post was just introducing the HTML5 validation bubbles.

    But I have other things to do and travel ahead of me so I will follow up later.


  • 13.  RE: How to Validate Form Fields with Pattern and Display Message Bubbles?