Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html ng-app="backend">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <script src="validator.js"></script>
    <style>
      .error {
        color: red;
      }
      .error input{
        border: solid 1px red;
      }
      input:focus {
        border: solid 1px red;
      }
    </style>
  </head>
<body>
  <form id="frmSurvey" name="frmSurvey"  ng-controller="SurveyController">
    <div>
      <lable for="article_url">URL:</lable>
      <input type="text" name="article_url" required
             check-valid-url
             ng-class="{error: (frmSurvey.article_url.$invalid && frmSurvey.article_url.$dirty)}"
             ng-forcus="(frmSurvey.article_url.$invalid && frmSurvey.article_url.$dirty)"
             ng-model="surveyForm.articleUrl"/>
      <span class="error" ng-if="isFormChecked && frmSurvey.article_url.$error.required">required</span>
      <span class="error" ng-if="frmSurvey.article_url.$error.pattern">invalid url</span>
    </div>
    <div>
      <button type="button" ng-disabled="frmSurvey.$invalid" ng-click="submitForm()">Submit</button>
      <button type="button" ng-click="submitForm()">Submit</button>
    </div>
    <div ng-if="isFrmValid"><h1>Valid</h1></div>
  </form>
</body>
</html>
​
 
//diretive
let backend = angular.module('backend', []);
backend.directive('checkValidUrl',checkValidUrl);
function checkValidUrl($timeout,$http){
    return {
        restrict: 'A',
        // require NgModelController, i.e. require a controller of ngModel directive
        require: 'ngModel',
        // create linking function and pass in our NgModelController as a 4th argument
        link: function(scope, element, attr, ctrl) {
            let urlregex = /^[a-zA-Z0-9_-]*$/;
            function doValid(ngModelValue) {
                if (urlregex.test(ngModelValue)) {
                    ctrl.$setValidity('pattern', true);
                } else {
                    ctrl.$setValidity('pattern', false);
                }
                if (ngModelValue.length <= 30) {
                    ctrl.$setValidity('maxLength', true);
                } else {
                    ctrl.$setValidity('maxLength', false);
                }
                // we need to return our ngModelValue, to be displayed to the user(value of the input)
                return ngModelValue;
            }
​
            // we need to add our doValid function to an array of other(build-in or custom) functions
            // I have not notice any performance issues, but it would be worth investigating how much
            // effect does this have on the performance of the app
            ctrl.$parsers.push(doValid);
        }
    };
}
//controller code
let SurveyController = function ($scope) {
  $scope.submitForm = function () {
    $scope.isFormChecked = 1;
    $scope.isFrmValid = 0;
    console.log($scope);
      if($scope.frmSurvey.$valid){
          $scope.isFrmValid = 1;
      }
      else{
        if($scope.frmSurvey.$error){
          if($scope.frmSurvey.$error.required){
              $scope.frmSurvey.$error.required[0].$$element[0].focus();
          }else if($scope.frmSurvey.$error.pattern){
              $scope.frmSurvey.$error.pattern[0].$$element[0].focus();
          }
        }
      }
  };
}
SurveyController.$inject = ['$scope']; //inject
backend.controller('SurveyController', SurveyController); //register SurveyController with backend module
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sonphuongpro
0viewers