I have an input field, email1, which I would like to use with Regular Expressions for validation. When I load the xpage on the web it prepends the backslash to the existing backslashes (I thought I was supposed to do that in the code). It also replaces non alphanumerics with what I believe is unicode.
<xp:td>
<xp:inputText value="#{document1.email}" id="email1"
required="true" styleClass="form-control">
<xp:this.attrs>
<xp:attr name="placeholder"
value="Enter your email address">
</xp:attr>
</xp:this.attrs>
<xp:this.validators>
<xp:validateRequired
message="Email is required">
</xp:validateRequired>
<xp:validateConstraint
message="email not valid">
<xp:this.regex><![CDATA[/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i]]></xp:this.regex>
</xp:validateConstraint>
</xp:this.validators>
</xp:inputText>
</xp:td>
This is the rendered html:
XSP.addOnLoad(function() {
XSP.attachValidator("view:_id1:_id2:email1",new XSP.RequiredValidator("Email is required"),null,new XSP.RegExpValidator("/^\u0028[\\w-]+\u0028?:\\.[\\w-]+\u0029*\u0029@\u0028\u0028?:[\\w-]+\\.\u0029*\\w[\\w-]{0,66}\u0029\\.\u0028[a-z]{2,6}\u0028?:\\.[a-z]{2}\u0029?\u0029$/i","email not valid"));
I have tried using both forms of the regex value, using the static value and computed value, both fail.
<xp:this.regex><![CDATA[#{javascript:/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i}]]></xp:this.regex>
Can anyone see what I am doing wrong and point me in the right direction.
Remove the leading "/" and the "/i" at the end of regular expression. Then it will work.
<xp:this.regex><![CDATA[^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$]]></xp:this.regex>
The leading "/" is already included internally and unfortunately modifiers like "/i" (case insensitive match) don't seem to work.
Don't worry about double backslashes and unicode characters in rendered JavaScript code. They will be interpreted by JavaScript as one backslash and the original characters.