Hello, I am looking for example on how to prefill email address input using Custom Input Mask forge component.
My requirement is, user has to input an email address of specific domain (in this case my company's domain), other domain is not allowed. For example, my user wants to input the email john.smith@company.com, inside the input text box, it should be prefilled with ___@company.com, this is to ensure that an email won't be send outside of company's domain. User will only need to fill in john.smith to complete the input box.
Now I can actually implement server validation and regex, but that won't show a nice UX, so I am looking for validation on front end.
Additional information:
Forge component Custom Input Mask has three fields to fill in (see picture). I'm looking on how to fill these in, especially MaskDefinition. I have been looking for example or solution inside the documentation but couldn't find anything helpful.
Hi Theodorus,
You can create your own logic to restrict the user to not change the domain of the email.
1. Give the local var default value of your domain and assign it to input.
2. Then on change of email input check the condition if this variable is not having your domain then you will reset the input to default value and refresh the input.
Or you can just ask the user to enter email without domain and add the domain name as text after the input.
Attaching an OML for your reference.
you can check the implementation here https://jozy-sohail.outsystemscloud.com/Zoom/Entry1.aspx?_ts=638382488232484792
hope it helps,
Thanks
Hello Jozy,
I have tried your workaround, and it works well on my application. In the meantime, I'm going to implement it to my application.
thanks a lot.
Hi @Theodorus Alvin ,
Can you try this component Email Autocomplete
Let me know if you want to create a demo.
Thanks,
Amit
Hi Amit,
My application is traditional web, I cannot use that component since it's only for mobile.
please look into below url, you can get any idea how to write your own javascript function
https://stackoverflow.com/questions/73558119/jquery-mask-use-to-a-fixed-domain-email
OR
In Component please look into "MaskPlugin" web block and check Javascript file under below code return so you can try to modify also.
email: {
mask: "*{1,64}[.*{1,64}][.*{1,64}][.*{1,63}]@-{1,63}.-{1,63}[.-{1,63}][.-{1,63}]",
greedy: !1,
casing: "lower",
onBeforePaste: function onBeforePaste(pastedValue, opts) {
return pastedValue = pastedValue.toLowerCase(), pastedValue.replace("mailto:", "")
},
definitions: {
"*": {
validator: "[0-9\uff11-\uff19A-Za-z\u0410-\u044f\u0401\u0451\xc0-\xff\xb5!#$%&'*+/=?^_`{|}~-]"
"-": {
validator: "[0-9A-Za-z-]"
}
onUnMask: function onUnMask(maskedValue, unmaskedValue, opts) {
return maskedValue
inputmode: "email"
Hello Amit,
I have added more information on my original post. Basically, inside Custom Mask Input, there are four fields to fill in and I'm looking for how to fill in MaskDefinition so it will show masked input as ____@companydomain.com, to prevent user from inputting any other domain name.
Hope that makes it clear.