I have a HTML input control as follows:

<input type="text" value="<%= this.CustomerAcctNumber %>" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" required >

on body onload I am adding a pattern and title attributes to this input control

var CustomerAcctNumber = document.getElementById("CustomerAcctNumber");
CustomerAcctNumber.setAttribute("pattern","\d{2}-(?:\d{4}-){3}\d{1}");
CustomerAcctNumber.setAttribute("title","xx-xxxx-xxxx-xxxx-x");

When i submit this web page, with valid pattern, it gives me error :

Input control was rendered as expected as follows :

<input type="text" value="" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" pattern="d{2}-(?:d{4}-){3}d{1}" title="xx-xxxx-xxxx-xxxx-x" required="">

Any suggestions or ments will be appreciated!!

I have a HTML input control as follows:

<input type="text" value="<%= this.CustomerAcctNumber %>" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" required >

on body onload I am adding a pattern and title attributes to this input control

var CustomerAcctNumber = document.getElementById("CustomerAcctNumber");
CustomerAcctNumber.setAttribute("pattern","\d{2}-(?:\d{4}-){3}\d{1}");
CustomerAcctNumber.setAttribute("title","xx-xxxx-xxxx-xxxx-x");

When i submit this web page, with valid pattern, it gives me error :

Input control was rendered as expected as follows :

<input type="text" value="" name="CustomerAcctNumber" id="CustomerAcctNumber" maxlength="19" onkeyup="CustomerAcctNumberChange()" pattern="d{2}-(?:d{4}-){3}d{1}" title="xx-xxxx-xxxx-xxxx-x" required="">

Any suggestions or ments will be appreciated!!

• javascript
• asp
• html

• is the pattern & title valued rendered correctly in HTML as you want ? – Nikhil Nanjappa Commented Sep 20, 2016 at 11:18
• the first line var CustomerAcctNumber = document.getElementById(" is abrupt. can you add that entire line in here? – Nikhil Nanjappa Commented Sep 20, 2016 at 11:21
• I have edited my question to correct the first line. – Mandar Patil Commented Sep 20, 2016 at 11:26
• Yes pattern and title is rendered as expected. – Mandar Patil Commented Sep 20, 2016 at 11:26
• The pattern doesn't look right to me for what you need. have you tested it elsewhere ? – Nikhil Nanjappa Commented Sep 20, 2016 at 12:05

1 Answer 1

I figured out the problem. You are passing the pattern value from JavaScript, so it escapes all your \ symbols which is needed to be generated in HTML. currently you're HTML generates pattern="d{2}-(?:d{4}-){3}d{1}" which is incorrect. So you need to provide another escape character next to each of the existing \ which will result to double \\ so you're HTML generates pattern="\d{2}-(?:\d{4}-){3}\d{1}". So the line in your JS would bee as shown below:

CustomerAcctNumber.setAttribute("pattern","\\d{2}-(?:\\d{4}-){3}\\d{1}"); //renders to '\d{2}-(?:\d{4}-){3}\d{1}' in HTML

Rest all are fine. Let me know if this worked.