I coded a confirmation email which requires the users email address, which they type into a text box. Then they are required to re-enter the same address into a 2nd text box to verify it is typed the same and hopefully correctly. My goal is to prevent them from simply using copy/paste from the 1st into the 2nd email text box. Anyone know a way to do this?
You can’t easily do it with Velo, but as workaround you can check if the first input is longer than 1 character, delete the input.
Something like:
let previousInputLength = 0;
$w.onReady(() => {
$w('#input2').onInput(event => {
if($w('#input2').value.length > 1 && previousInputLength === 0){
$w('#input2').value = '';
}
previousInputLength = $w('#input2').value.length;
})
})
Hi there …
One way I’d do it is by having a variable to store the value of the email address, and check the typed value against it, and if the length of the new value is longer, or shorter than 1 charachter of the original value, just ignore it.
const cache = { email: '' }
$w('#verifyEmail').onInput(event => {
const value = event.target.value;
const length = value.length;
if (length === 0 || length === cache.email.length +1 || length === cache.email.length -1) {
// Accepts the new value, and update the variable value.
event.target.value = cache.email = value;
} else {
// Replace the pasted value with the original value.
event.target.value = cache.email;
}
})
Note: This method doesn’t prevent the user from pasting text into the input field, it just accepts the input if it was one character at a time, and resets it to whatever original value of the email variable (property) was.
Hope this helps~!
Ahmad
1 Like
or if you prefer you can check if the first input includes the @ symbol:
let isStartInput = true;
$w.onReady(() => {
$w('#input2').onInput(event => {
if(isStartInput&& $w('#input2').value.includes('@')){$w('#input2').value = '';}
$w('#input2').value.length === 0 ? isStartInput = true : isStartInput = false;
})
})
Ahmad’s solution is better. So you should go for it.
Hmmm… maybe something like this to clear the input element if someone tries to copy paste?
export function input1_keyPress(event) {
if(event.ctrlKey) { //returns true if control key is pressed while typing
if(event.key === 'v') { //if the key is `v`
setTimeout( () => {
$w("#input1").value = '';
}, 100);
}
}
}
100 milliseconds to wait for the paste to complete but i reckon it can be shortened
But, Shan, what if the email address contains the ‘v’ character? + what about pasting through mouse right click?
I think Ahmad’s answer is the right solution.
@jonatandor35 It wont matter if the email address contains the ‘v’ character - the above code will come into play only when Control and V are clicked at the same time.
But yes you are right about mouse click, didn’t consider that.
Ahmad’s response is better.
Just a little about why this is important. While I already collect his name, company and phone number, delaying the confirmation letter that a quote is coming runs the risk of losing a big sale. I do collect his tele number, name, and company name in a database, but delay is inevitable with a wrong email address.
Thanks to you all for your quick and thoughtful solutions. I do appreciate it. However I already validate 1st input as an email address and store it in a variable for comparison to the 2nd input. So I am covered with all the checking I can do.
The only thing I lack is whether or not the user typed or pasted into the 2nd text box. If he did, and the email is still wrong (such as a transposition of 2 characters when he typed in the 1st field), then he will not get a confirmation email.
For that reason I like, and will explore further, shan’s very creative solution. You suggested capturing Ctrl-V keystroke. I will try something like that. Further, while I am not familiar with capturing keystrokes, your code looks looks like it has the potential of capturing all keystrokes, which can be compared one by one to the 1st input. Would that work?
I tried Shan’s solution and it worked for all except the mouse right_click | paste. Also, it turns out that a “v” in the email address does not cause failure. Most folks on this webpage will not know how to change the “v” to something else.
The mouse right_click is another matter entirely. Anyone know how to detect a mouse right click to its menu?
This is what I have so far. I augmented Shan’s solution a little by inserting a message to “type” in the address, and also added a click event listener to clear the field to allow user to type over the “type” message.
export function emailVerify_click ( event ) {
$w ( “#emailVerify” ). value = “” ;
}
export function emailVerify_keyPress ( event ) {
if ( event . ctrlKey ) { //returns true if control key is pressed while typing
if ( event . key === ‘v’ ) { //if the key is v
setTimeout ( () => {
$w ( “#emailVerify” ). value = ‘Please manually type your email address.’ ;
}, 100 );
}
}
}
Have you read the suggestions?! I thought not.
Ahmad, I did read all suggestions including yours. When I read in your suggestion “This method doesn’t prevent the user from pasting text into the input field…”, I believed immediately I could not use it and went on to the next suggestions.
I am compelled to write a big thanks for “poking me” into submission. I tried your suggestion after looking more closely at it, and glad I did. Viola! Quite brilliant and creative…it is exactly what I am looking for. 
Works great!
I meant you can’t prevent the actual action of pasting, but the code can ignore the pasted text and throw it away in the garbage, it’s like having a button, it’s clickable, but nothing happens when you click it.
The code only accepts the input if it was only one character at a time, otherwise, if the value is more than one character (that means the value is being pasted, and not manually entered).
No need to thank me, happy to help.
Since I was not a programmer by profession, I always learn something new from contributor responses. At 77, learning is one of the great delights of life!