Validate URL with AngularJS and HTML 5

Question

Good morning all:

Looks like a very common question, but after googling for hours I am not able to figure this out: how to validate an URL including www without http.

These is what I did:

Used the input type url: it does not accept www.google.com;
Changed the input type to text and used ng-pattern: I still get the www.google.com invalid;
Changed different regex but still not working.

So when I click on the submit button, I show an alert if the form is invalid (true invalid, false valid). Here is my Plunker

Thanks for the help

stackoverflow.com/a/8234912/3110058 use the pattern in this it is working fine on your pluncker. pattern is /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-]*)?\??(?:[-\+=&;%@.\w]*)#?(?:[\w]*))?)/ — Amit Malik
– Amit Malik, Commented Apr 11, 2017 at 9:22

naXa stands with Ukraine · Accepted Answer · 2018-01-29 21:22:22Z

11

Instead of binding the regex to scope, you could directly add the regex to ng-pattern attribute. Like this:

<input type="text" ng-pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/" ng-model="website">

I have updated the plunkr. Please take a look at this. Plukr

edited Jan 29, 2018 at 21:22

naXa stands with Ukraine

38.6k25 gold badges208 silver badges279 bronze badges

answered Apr 11, 2017 at 9:19

Muhammed Neswine

2,0571 gold badge21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tanmay · Accepted Answer · 2017-04-11 10:10:40Z

5

The thing here is, if you want to bind ng-pattern from controller, your regex shouldn't contain the starting and ending /s. Like this:

$scope.regex = "^(http[s]?:\\/\\/){0,1}(www\\.){0,1}[a-zA-Z0-9\\.\\-]+\\.[a-zA-Z]{2,5}[\\.]{0,1}$"

But, if you directly specify pattern like ng-pattern="/^(http|https|...)$/", you need the extra /s as well.

working plunker

edited Apr 11, 2017 at 10:10

answered Apr 11, 2017 at 9:44

tanmay

7,9112 gold badges23 silver badges39 bronze badges

2 Comments

MarcosF8 Over a year ago

Thanks for that! I apreciate the help with the basic concepts. It still get valid for this URL: fdsfsfsfsf

tanmay Over a year ago

@MarcosF8 had forgotten to escape the escape slashes. works now. Updated plunker too :)

DancingDad · Accepted Answer · 2018-05-13 21:40:23Z

0

Try using the ng2-validation library. It can be used to perform most validations you should ever need. Angular2 custom validation, inspired by jQuery validation.

answered May 13, 2018 at 21:40

DancingDad

1371 silver badge7 bronze badges

Comments

vishnu · Accepted Answer · 2019-06-25 06:27:09Z

I think we can also use AngularJs builtin URL validator.

<script>
angular.module('urlExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.url = {
    text: 'http://google.com'
  };
}]);
</script>

<form name="myForm" ng-controller="ExampleController">
<label>URL:
  <input type="url" name="input" ng-model="url.text" required>
<label>
<div role="alert">
  <span class="error" ng-show="myForm.input.$error.required">
  Required!</span>
  <span class="error" ng-show="myForm.input.$error.url">
  Not valid url!</span>
</div>
 <tt>text = {{url.text}}</tt><br/>
 <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
 <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
 <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
 <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
</form>

Akurathi-sandeep Aurathi · Accepted Answer · 2020-08-11 04:45:29Z

-1

`

if (this.resource.url.match("^(https:\/\/|http:\/\/)")) {
if (this.resource.url.match("^(https:\/\/www\.|http:\/\/www\.)?([da-z.-]+)\\.([a-z.]{2,6})")) {

           
         }

         else
         {
          errorMessages.push("url is invalid");

         }

      }
      else {
         errorMessages.push("url is invalid");

      }

`

answered Aug 11, 2020 at 4:45

Akurathi-sandeep Aurathi

112 bronze badges

2 Comments

vahid tajari Over a year ago

Please add some kind of explanation to your solution

Akurathi-sandeep Aurathi Over a year ago

0 in the above if condition it's validate the http: and https: if url matches it goes into second if condition where the full url "google.com" matches if anything miss like .com or www it shows the error message

Collectives™ on Stack Overflow

Validate URL with AngularJS and HTML 5

5 Answers 5

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related