Hello,
It is possible to validate an email address entered into the igTextEditor (or possibly igMask) on the client side?
Thank You,
Randy
I see there is a RexEx option under ValidatorOptions. That would appear to be the solution, unless there is a better one.
Hello Randy,
Thank you for posting in our community!
One possible solution for email validating is using regular expressions:
$.ig.loader(function () {
var pattern6 = /^[a-zA-Z]{1}[a-zA-Z0-9_\.\-]*\@\w{2,10}\.\w{1,10}$/;
$('#maskEditor1').igTextEditor({
validatorOptions: {
onblur: true,
onchange:true,
regExp: pattern6,
},
required: false,
width: 395,
});
The regular expression from the code snippet above validates successfully emails which start with a letter, might contain letters, digits, “.”, “-” and “_” only and ends with @ followed by string of letters followed by “.” followed by string of letters.
Attached is the whole sample for your reference.
If any additional questions arise feel free to contact me again.
Thank you, Dimka.
I do have a question about using RegExp with the igMaskEdit control. I have a simple RegExp to validate US telephone numbers:
[2-9][0-9]{2}[2-9][0-9]{2}[0-9]{4}
This is just ten digits with the extra rule that in positions 1 and 4 there cannot be the 0 or 1 digit.
So I set the igMaskEdit as follows (using MVC helper):
@(Html.Infragistics().MaskEditorFor(model => model.PhoneMobile, htmlAttr)
.InputMask("(000) 000-0000")
.DataMode(MaskEditorDataMode.RawText)
.ValidatorOptions(model => model
.OnBlur(true)
.CustomErrorMessage("Phone Number is Not Valid")
.RegExp("^[2-9][0-9]{2}[2-9][0-9]{2}[0-9]{4}$")
)
.Render()
I have tried several variations on this RegExp, even something as simple as ^[0-9]{10}$ -- but the validation always fails. Is this because the mask characters must be part of the RegExp also? Or am I doing something else incorrectly?
Thank you for your reply.
In order to investigate further I have several questions. Have you tested the scenario by using the mask (“(999) 999-9999”) instead of ("(000) 000-0000")? If so, what the observed behavior?
You might be also interested in the following resource concerning masks and regular expressions usage:
http://ko.infragistics.com/community/blogs/damyan_petev/archive/2012/09/14/jquery-editors-how-to-better-guide-users-to-the-desired-input.aspx
Looking forwards to hearing from you.
Hello Dimka,
I have learned a little more.
When the MVC Helper is being used, the igMaskEditor will pick up the DataAnnotations from the model. So, if you set the StringLength or RegularExpression DataAnnotations on the model for example, the control will enforce them.
In the case of my US phone number, the StringLength in the model has to include the length of the input data AND the mask. So if the mask is "(000) 000-0000" the StringLength has to be set at 14, even if only the ten digits are being stored in the database.
That doesn't solve my issue but I thought it was very interesting.
Thank you for your reply!
White spaces should be also included both in masks and in regular expressions. A possible solution might be using the following options:
- Regular expression: /^\([2-9][0-9]{2}\)\ [0-9]{3}\-[0-9]{4}$/
- Mask: '(999) 999-9999' or '(000) 000-0000'
Attached is a sample for your reference. Feel free to use it and modify it.
You might found it interesting that masks are used to indicate if a position is a required or optional and what type of symbol it should contain (digit, letter, any symbol, etc.). The difference between “0” and “9” usage is that “0” indicates that the position is required and “9” shows that the position is optional. When “(000) 000-0000” is used then it is expected a warning message to pop up until the last field position is entered correctly. On the other hand if “(999) 999-9999” is implemented the warning message will not be displayed since it indicates that all the positions are optional and might be left empty. I have added bellow for your reference a resource containing a list with masks:
http://help.infragistics.com/Help/NetAdvantage/LightSwitch/2012.2/CLR4.0/html/MaskedEditor_Using_Infragistics_Masked_Editor.html
In order to implement more complex scenarios including specification of which digits, letters or special symbols are acceptable it is needed regular expressions to be used in combination with masks. Reguar expressions are also used implement conditions (alteration) or strings with unknown length (Kleene star) for instance since the regular expression processor provide capabilities for working with non-linear expressions.
If any further questions arise feel free to contact me again.
Thank you for your message. For some reason, I am still unable to validate the US phone number example. Here is the code I am using:
@(Html.Infragistics().MaskEditorFor(model => model.PhoneMobile, editorInputAttr)
.InputMask("(999) 999-9999")
.Required(false)
.OnSubmit(false)
.OnChange(false)
.ShowIcon(true)
.AnimationShow(200)
.Alignment(ValidatorErrorLabelTextAlignment.Bottom)
.CustomErrorMessage("Phone Number Is Not Valid")
.RegExp("/^\\([2-9][0-9]{2}\\)\\ [0-9]{3}\\-[0-9]{4}$/")
I tried four variations for the RegExp"
.RegExp("\\([2-9][0-9]{2}\\)\\ [2-9][0-9]{2}\\-[0-9]{4}")
.RegExp(@"([2-9][0-9]{2}) [2-9][0-9]{2}-[0-9]{4}")
.RegExp("^\\([2-9][0-9]{2}\\)\\ [0-9]{3}\\-[0-9]{4}$")
Can you suggest what I might be doing incorrectly?
Have you managed to test the sample I have attached in previous response? If you need any further assistance or if any additional questions arise feel free to update this thread.
I have one more suggestions which reproduced the desired behavior when implemented:
.RegExp(@".[2-9][0-9]{2}..[0-9]{3}.[0-9]{4}"))
Attached is a working sample for your reference.
Please let me know if it works for your project. If you still encounter unexpected behavior please provide the sample and feel free to update the thread with additional questions or details.
Hi Dimka,
Of course I will be glad to do that.
I will be traveling for the next two weeks, so is it possible to keep this thread open until the end of October? I will get your sample done by then, or let you know that I cannot reproduce the problem outside of my project.
Thanks,
In order to investigate further could you send me a sample reproducing your scenario?
Thank you in advance.