1

I want to do client and server side validation for Textbox which should only accept URL. I am not able find any link which does the same.

Can anyone please provide some ideas?

@Html.TextBoxFor(m => URl })
MVC
  • 649
  • 7
  • 23
  • https://stackoverflow.com/questions/28049416/best-url-validation and https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url – devlin carnate Aug 02 '18 at 03:38
  • @devlincarnate, How to implement that code in my scenario. I have model where I have properties called `URl`. I do not understand how to do. please show me some way. – MVC Aug 02 '18 at 03:48

3 Answers3

2

There is already a UrlAttribute in the System.ComponentModel.DataAnnotations that you can apply to your property to give both client and server side validation.

[Url] // Add optional (ErrorMessage = "...") as required
public string Url { get; set; }

Internally, it uses the following regex (from source code)

^(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})|[!\$&'()*+,;=]|:|@)|/|\?)*)?$

  • Thank you Stephen. It helped me. – MVC Aug 02 '18 at 09:06
  • It does not accept `www.google.com` or `google.com`. I want to implement this type of url also. – MVC Aug 02 '18 at 21:03
  • @MVC, The `[Url]` attribute is based on a valid url (which includes the protocol - e.g. `http`). If you want to allow just `google.com` (I would not recommend it), then you would need to use a [RegularExpression]` attribute - [this one](https://www.regextester.com/93652) should be suitable –  Aug 02 '18 at 23:52
  • Thank you Stephen. I will then take your recommendation. I will not implement like `www.google.com`. I will use the `Url` attribute only. – MVC Aug 03 '18 at 00:16
1

You can do URL Validation using regex for validation.

^http(s)?://([\w-]+.)+[\w-]+(/[\w- ./?%&=])?$

OR

/^http(s)?://([\w-]+.)+[\w-]+(/[\w- ./?%&=])?$/

You can this regex in both Server-Side and Javascript.

check it on : JSFIDDLE

Hiren Patel
  • 1,071
  • 11
  • 34
1

You can use a RegularExpression validation in your model:

[StringLength(200)]
[RegularExpression(@"((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)", ErrorMessage = "Not a valid website URL")]
public string MyUrlField { get; set; }

I have found the above regex for matching a url from here. You could also check this website for other regex which would match a url.

Note that you need to include jquery-validation-unobtrusive, for the client side validation.

Hooman Bahreini
  • 14,480
  • 11
  • 70
  • 137