5

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:

  1. Used the input type url: it does not accept www.google.com;
  2. Changed the input type to text and used ng-pattern: I still get the www.google.com invalid;
  3. 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

Animay
  • 602
  • 1
  • 7
  • 18
MarcosF8
  • 1,848
  • 5
  • 19
  • 33
  • 1
    https://www.npmjs.com/package/angular-validation – Charly Apr 11 '17 at 09:14
  • http://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 Apr 11 '17 at 09:22

5 Answers5

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

naXa stands with Ukraine
  • 35,493
  • 19
  • 190
  • 259
Muhammed Neswine
  • 2,028
  • 1
  • 20
  • 20
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

tanmay
  • 7,761
  • 2
  • 19
  • 38
  • Thanks for that! I apreciate the help with the basic concepts. It still get valid for this URL: fdsfsfsfsf – MarcosF8 Apr 11 '17 at 09:59
  • @MarcosF8 had forgotten to escape the escape slashes. works now. Updated plunker too :) – tanmay Apr 11 '17 at 10:08
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.

DancingDad
  • 119
  • 1
  • 7
0

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>
vishnu
  • 539
  • 7
  • 11
-1
  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");

      }

`

Akurathi-sandeep Aurathi
  • 1
  • 1