How to add input field validation for url using Angular.js/Javascript

Question

i need one help.I need to validate the input field for URL.I am explaining my code below.

<div class="input-group bmargindiv1 col-md-12">
 <span class="input-group-addon ndrftextwidth text-right oditek-form" style="width:180px" id="identitylabel">Website URL:</span>
<input type="text" name="url" id="weburl" class="form-control oditek-form" placeholder="Add Website URL" ng-model="url" ng-keypress="clearField('weburl');">
</div>

Here right now i can entry any URL of any format.suppose user is entering one URL like www.angon.com then it should throw the validation error to add http/https in beginning of the URL.Please help me.

Pankaj Parkar · Accepted Answer · 2016-03-05 12:31:29Z

1

You could simply use add type="url" to your input field, so that would verify value of input field and by verify its valid URL or not it will add ng-invalid class over input field.

Markup

<input type="url" name="url" id="weburl" 
  class="form-control oditek-form" placeholder="Add Website URL" 
  ng-model="url" ng-keypress="clearField('weburl');"/>

Refer Examples :- https://docs.angularjs.org/api/ng/input/input%5Burl%5D

ng-pattern "- https://docs.angularjs.org/api/ng/directive/ngPattern

edited Mar 5, 2016 at 12:31

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Mar 5, 2016 at 11:49

Prasad

1,6005 gold badges27 silver badges42 bronze badges

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

3 Comments

user5443928 Over a year ago

Ok,what is the pattern to display that validation..?

Prasad Over a year ago

Have you checked the Documentation ? docs.angularjs.org/api/ng/directive/ngPattern

Pankaj Parkar Over a year ago

@N.V.Prasad don't worry. I did +1 and edited with some brief explanation.

Collectives™ on Stack Overflow

How to add input field validation for url using Angular.js/Javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related