Create a verify email address UI only field?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Have a skuid page on a force.com Site, want to add a Verify Email Address field that forces someone to type in their email address twice and check if they match each other and if not throw an error. Would like to do this with a UI-only field, but am willing to create a field in database if that's what it takes. 

Any ideas on how to make this happen? Thanks!
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb
beat ya to it skuid community!
  1. Create a UI-only field on the same model as your email field
  2. Create a snippet that checks if the verify email UI-only field matches the email field
  3. Create a blank Template component to hold your alert text, copy the unique id
  4. Add your snippet like the one below.
  5. Create a model action that triggers when the Verify email field is updated, with an action of run a snippet
var params = arguments[0],	$ = skuid.$;
var borrowerModel = skuid.model.getModel('BorrowerAccount');
var borRow = borrowerModel.getFirstRow();
var borEmail = borrowerModel.getFieldValue(borRow,'Email__c');
var verEmail = borrowerModel.getFieldValue(borRow,'VerifyEmail');
if (verEmail == borEmail) {
     $("#template-unique-id").html(""); } else { $("#template-unique-id").html("Email addresses do not match, please check again"); }
(Edited)
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Maybe two email address fields and then conditionally render a rich text field if they don't match that says "email addresses do not match" and a save button that only renders if they do match. Yours is better, but I'm afraid of java script!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
You can do it all with skuid, without javascript.

Instead of creating the snippet in Jack's solution, create a ui-only formula field (maybe called (Verified") that returns a boolean with a formula like ({{Email__c}} == {{VerifyEmail}}).
Then create a template or rich text component with your warning message, and set up rendering conditions on it such that it only renders when both email fields are not null and Verified = true.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Hmm, you still might need some javascript after all, to force the formula to recalculate when the VerifyEmail field is changed?
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,270 Points 5k badge 2x thumb
Both good solutions! Not sure why I went the javascript route since it scares me too. But one issue that came up in testing, that may or may not be an issue with the other solutions here is that "test@test.com" is not the same as " test@test.com " - any extra spaces make them not come out as equal.

In JS, I could add a trim function, so that it takes out any space before or after and checks if they are equal after trimming. I wonder if that would automatically get trimmed if comparing two email fields, or an email field and a UI only field?

I also added the .button enable and disable stuff, which as pointed out above, is totally doable without javascript.

Anyway, here's the updated code:

var params = arguments[0],
	$ = skuid.$;
var borrowerModel = skuid.model.getModel('BorrowerAccount');
var borRow = borrowerModel.getFirstRow();
var borEmail = borrowerModel.getFieldValue(borRow,'Email__c');
var verEmail = borrowerModel.getFieldValue(borRow,'VerifyEmail');
var borEmailTrim = $.trim(borEmail);
var verEmailTrim = $.trim(verEmail);
if (verEmailTrim == borEmailTrim) {
     $("#sk-32Rqgb-430").html("");
     $('#nextPageButton').button('enable');
} else {
    $("#sk-32Rqgb-430").html("Email addresses do not match, please check again");
    $('#nextPageButton').button('disable');
}
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
True. I personally like the javascript version better. More flexibility. But finding ways to do things in Skuid without going to the dark side is always a fun puzzle.