tag validation for URL

Question

I am trying to validate an URL using JavaScript, but for some reason it's not working. When someone has not entered any URL, it shows message like:

Please enter valid URL.(i.e. http://)

I am trying to fix it, but can't make it working.

Is there any trick in HTML5 that allows to validate an URL?

$(document).ready(function() { 
$("#contactInfos").validate( 
 { onfocusout: false, rules: { 
       phone: { number:true }, 
       zipcode: { number:true }, 
       website: {    url:true    } 
 }, 
     messages: { phone: { number:"please enter digit only" }, 
     zipcode: { number:"Plese enter digit only"  }, 
     website: { url: "Please enter valid URL.(i.e. http://)"     } 
   } 

});

Validate method for an URL:

url: function(value, element) {
      values=value.split(',');
      for (x in values)
      {
          temp=values[x].trim();
  temp1=this.optional(element) || /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(temp);

      if(temp1!=true)
      {
        return false;
      }
      }
       return true;
},

this is the code $(document).ready(function() { $("#contactInfos").validate( { onfocusout: false, rules: { phone: { number:true }, zipcode: { number:true }, website: { url:true } }, messages: { phone: { number:"please enter digit only" }, zipcode: { number:"Plese enter digit only" }, website: { url: "Please enter valid URL.(i.e. http://)" } } }); i have used jquery for it, but not working :( — Sumit Bijvani, Dec 11 '12 at 12:33
You've called a method name validate. Where's the code for that method? I've also edited your post to include the code you pasted above. Also the code you pasted above would produce errors in the current format. — TommyBs, Dec 11 '12 at 12:46
@PrinceBijvani: it will be easiest for someone here to help you if you set up a jsFiddle (jsfiddle.com) that shows your attempt and problem. — Frank van Puffelen, Dec 11 '12 at 12:52

score 50 · Accepted Answer · edited Sep 15 '16 at 17:38

50

In html5 you can use the tag input type="url":

<input type="url" />

you can use your own pattern too:

<input type="url" pattern="https?://.+" required />

In the paper Uniform Resource Identifier (URI): Generic Syntax [RFC3986] http://www.ietf.org/rfc/rfc3986.txt the regular expression for a URI is:

^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?

For example, matching the above expression to

  http://www.ics.uci.edu/pub/ietf/uri/#Related

results in the following subexpression matches:

  $1 = http:
  $2 = http
  $3 = //www.ics.uci.edu
  $4 = www.ics.uci.edu
  $5 = /pub/ietf/uri/
  $6 = <undefined>
  $7 = <undefined>
  $8 = #Related
  $9 = Related

edited Sep 15 '16 at 17:38

pdoherty926

9,895
4
37
68

answered Dec 11 '12 at 13:23

Scipion

1,350
1
10
16

20

i wnat to make http part optional – aWebDeveloper Oct 03 '13 at 07:59
I'm pretty sure it *is* optional. – silvenon Dec 10 '14 at 20:51
2

Since this is high in the search results for this problem and two of these comments confused me here's an update/clarification based on my research: 1. [The pattern attribute IS supported by url type inputs](http://www.w3.org/TR/html-markup/input.url.html) 2. "http" is not optional by default (at least in some browsers - in Chrome and Firefox it is not) – Javier Evans Mar 24 '15 at 19:08
To make http part optional follow this regexp https://stackoverflow.com/a/42619368/2637620 – JesuLopez Jun 25 '18 at 08:26

score 2 · Answer 2 · answered Oct 25 '17 at 15:53

2

Does it make sense that the url is valid without a protocol?

For instance, currently http://google.com is a valid url, while google.com is not.

Similarly, http://localhost is a valid url, while localhost is not a valid url.

answered Oct 25 '17 at 15:53

Mr world wide

4,696
7
43
97

tag validation for URL

2 Answers2

Linked