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

  • 2
  • 2
  • Question
  • Updated 10 months ago
  • Doesn't Need an Answer
  • (Edited)
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).
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb

Posted 2 years ago

  • 2
  • 2
Photo of Matthew Neil

Matthew Neil

  • 31,478 Points 20k badge 2x thumb
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
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
Nay I am going to turn on my IOL / BOL / SW based logger and my panopticlick tracker:

Panopticlick
https://panopticlick.eff.org/
Photo of Matthew Neil

Matthew Neil

  • 31,478 Points 20k badge 2x thumb
Does that give you IP geo locating like goggle analytics?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
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
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
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.
(Edited)
Photo of Matthew Barrett

Matthew Barrett

  • 70 Points
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?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
There is a bug in the code that I will look at. I did this very rapidly just to introduce a new idea.
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,758 Points 5k badge 2x thumb
yes, I have noticed the same bug as Matthew noticed.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
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.
Photo of Matthew Barrett

Matthew Barrett

  • 70 Points
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.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,694 Points 20k badge 2x thumb
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.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 27,884 Points 20k badge 2x thumb
I created a new post with a modified demo:

Field Validation Sorry No Bubbles
https://community.quickbase.com/quickbase/topics/field-validation-sorry-no-bubbles
(Edited)