how to create patterns in TextBox?

Question

Notes : i tired all questions & answer related this topic. Like This

I use simple Form Use URL TextBox i use patterns pattern="https?://.+" that perfect work.

I want to allow Text (small & uppercase) Like

1. www.test.com
2. https://www.test.com
3. https://test.com
4. WWW.TEST.COM
5. HTTPS://WWW.TEST.COM*
6. HTTP://TEST.COM

i tried Code :

<input name="website" id="website" type="text" class="Custom_textbox"  pattern="https?://.+"/>

Notes: Only Using pattern try to solve my problem. not other script

My code Here

Wiktor Stribiżew · Accepted Answer · 2016-11-08T10:52:26.877

1

You may use an alternation like this:

pattern="(www\.|https?://).+"
         ^     ^         ^

A case-insensitive version:

pattern="([wW][wW][wW]\.|[hH][tT][tT][Pp][sS]?://).+"

See the regex demo. Note that the case insensitive version can be shortened with the help of limiting quantifiers: pattern="([wW]{3}\.|[hH][tT]{2}[Pp][sS]?://).+".

It will accept any input starting with www. or http:// or https://.

input:valid {
  color: black;
}
input:invalid {
  color: red;
}

<form name="form1"> 
  <input name="website" id="website" type="text" class="Custom_textbox"
     pattern="([wW][wW][wW]\.|[hH][tT][tT][Pp][sS]?://).+" 
     title="Please valid url" required/>
  <input type="Submit"/> 
</form>

edited Nov 08 '16 at 10:52

answered Nov 08 '16 at 10:38

Wiktor Stribiżew

607,720
39
448
563

thanks For Answer. but i Add Text like WWW.TEST.COM then error are there – Sumit patel Nov 08 '16 at 10:49
Yes, because regex is by default case sensitive and you cannot use modifiers in the HTML5 pattern attribute. You will have to use character classes. – Wiktor Stribiżew Nov 08 '16 at 10:51
1

awesome .Thanks @Wiktor Stribiżew – Sumit patel Nov 08 '16 at 11:21

how to create patterns in TextBox?

1 Answers1