I have an input text for a website address and I would like to validate it.

Examples of of what should be allowed are: www.somesite or or or anything valid for a website address.

Probably should use jQuery or just plain Javascript

I have an input text for a website address and I would like to validate it.

Examples of of what should be allowed are: www.somesite. or or or anything valid for a website address.

Probably should use jQuery or just plain Javascript

• javascript
• jquery
• validation

• I tried to fix this a bit, but it still isn't a great question... – Ryley Commented May 3, 2013 at 17:15

4 Answers 4

Disclaimer : this is an extremely naive implementation of a url validation written in regex literal javascript for the purpose of explaining the thought behind such an endeavor, this code is not intended for production use in any capacity.

URL validation using regular expressions:

The following code will work for a cross section of cases. You will want to verify that those cases match your need. Urls are wide and varied creatures including possible usage of utf-8 characters not covered in the basic set below. For those cases you will want to investigate more about regex (totally worth doing in any capacity for javascript development anyway).

var urls = ['www.someurl.', // true
            'www.someurl', // true
            'google', // true
            'not a url', // false
            '[email protected]', // false
            'http://www.yahoo.', // true
            'https://www.clutter', // true
            'ftp://test.fail', // false
            'http://this.is.a/path/to/my/resource.html', // true
            'adress-with-hyphens']; // true
for( var i = 0, url; url = urls[i++]; ){

  console.log(url, /^(https?:\/\/)?([\w\d\-_]+\.)+\/?/.test(url));

}

to explain this code:

• / starts the regex literal.
• ( opens a selection group.
• http is a string to search for.
• s? makes the s part of the string optional.
• : is a search of the colon character.
• \/ is the escape character followed by the character to search for (/), this is useful in many cases.
• )? makes the group optional.

The next group contains a lookup for any word, digit, hyphen or underscore character (one or more +), followed by a . (\.). followed by an optional /. / at the end closes the regular expression literal. test is a method on any regular expression object to see if a string passes it. The string to test is given as the only argument.

You want to use regular expressions.

Regular expressions are a pattern matching technology designed to search Regular Languages. What this means is you can use a Regular Expression to find and match many different things that fit your desired pattern.

A great place to start learning regex (short for Regular Expressions) at regular-expressions.info

They have amazing guides to get you started

Once you learn about them you will understand why this pattern

[www]?\..*?\.(|net|org)

means and why it is not a great pattern to use to match a website although it would work.

Good luck and happy hunting

I noticed your title references jQuery - and while I assume this question is dead thought I'd post this for anyone else ing along. This jQuery plugin is simple to use and pretty powerful. While a plugin is overkill to validate a single field it can be helpful if you have other validation (including required fields) on the same form. The below example is pulled from the docs. After initing the plugin you simply add classes of what validation to include. You can create customs one if you need it but its a little more plex.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Usage is simple:

$("#mentForm").validate();

form:

<form class="cmxform" id="mentForm" method="post" action="">
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="cment">Your ment</label>
     <em>*</em><textarea id="cment" name="ment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </form>

And thats it XD

$.ajax({url: webpage ,type:'HEAD',error:function(){
alert('Oops !');
}});