detect if string is a valid URL and is not empty

Question

I would like to check if one of the input fields is empty and if the #urlink is a the format of a URL before I perform this function in the js:

$scope.favUrls.$add  

not sure how to go about it.

html

<input type="text" id="urlName" class="form-control" placeholder=""  ng-model="mvName" />
<input type="text" id="urlLink" class="form-control" placeholder=""  ng-model="mvUrl" />

app.js

$scope.saveToList = function(event) {

    var mvName = $scope.mvName.trim();
    var mvUrl = $scope.mvUrl.trim();

          if (mvName.length > 0) {
            $scope.favUrls.$add({
              name: mvName,
              title: mvUrl
            });
              urlName.value = ''; //urlName is the ID of  input box - Angular rocks!
            urlLink.value = ''; //urlName is the ID of  input box - Angular rocks!
          }

}

Answer 1

use the following function that validate the URL

function ValidURL(str) {
  var pattern = new RegExp('^(https?:\/\/)?'+ // protocol
    '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ // domain name
    '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) address
    '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // port and path
    '(\?[;&a-z\d%_.~+=-]*)?'+ // query string
    '(\#[-a-z\d_]*)?$','i'); // fragment locater
  if(!pattern.test(str)) {
    alert("Please enter a valid URL.");
    return false;
  } else {
    return true;
  }
}

source