multiple Text box input validation check

Question

I am writing one textbox validation that actually disallows user to enter some invalid special character. Once user enters a invalid special character I am throwing a hard error prompt and I am setting a flag:

$scope.charAllowedText = false;

So the next button will get disabled if the input box has any invalid value. As soon as user deletes the invalid character I am just changing this flag to true. My solution works fine for single text box but this is not working for multiple text input.

On each user onClick am calling this validation:

$scope.validateUserInput = function(inputKey) {
  var count = 0;
  // inputKey = inputKey.replace(/[^a-zA-Z0-9 ]/g, "");
  $scope.imp = [];
  $scope.imp = Array.from(inputKey.replace(/[a-zA-Z0-9\s]/g, ''));
  var charInp = [];

  $scope.missingItems = [];
  $scope.imp.forEach(function(itemFromTarget) {
    var itemFound = false;
    for (var i in $rootScope.specialChar) {
      if (itemFromTarget === $rootScope.specialChar[i].value) {
        itemFound = true;
      }
    }

    if (!itemFound) {
      $scope.charAllowedText = false;
      $scope.missingItems.push(itemFromTarget);
    }
  });

  if (($scope.charAllowedText == false)) {
    $rootScope.charAllowedConfig = $scope.charAllowedText;
    $scope.header_class = 'modal-error-header';
    $scope.cancel_bttn = {
      txt: 'Ok',
      class: 'btn-default'
    };
    $scope.action_bttn = {};
    $modal({
      scope: $scope,
      templateUrl: 'flexi-modal.html',
      title: 'Error!',
      content: '<p class="alert alert-danger">You have entered the ' + $scope.missingItems[0] + ' character which is not supported. Please reenter a different character.</p>',
      html: true,
      show: true,
      animation: 'am-fade-and-scale',
      placement: 'center'
    });
  }
};

For a particular case if I remove the invalid character in one of text boxes and other text boxes still have invalid characters my next button gets enabled since the flag value was set to true by the first text box.

add a plunker in order to see what you mean or give us what is passing and what is not passing — geo, Mar 17 '17 at 13:34

score 1 · Accepted Answer · edited May 23 '17 at 12:32

The right way to write a validation check should be to create a directive. The reason for this is that you want to keep your validator as stateless as possible. The problem to your workaround is that you use the same variable in order to check if the the input is valid. If you want to keep your code the same is to change the function and return a true or false instead of setting the value to the variable $scope.charAllowedText

You can do that by using Angular-validator .

Also have a look at this post .

multiple Text box input validation check

1 Answers1