validating input fields using angular and jquery?

Question

I’m using angular.js and jQuery to validate user inputs in a form that is created using an ng-repeat. So essentially I have an array of strings(barcodes) I loop through and display, I also display an input field. The user is going to use a barcode scanner, think of it like a copy/paste effect, to enter strings into the input fields. If the barcode doesn’t match the string thats next to it than it should alert the user and clear the input field. I have the code below that uses ng-model-options ‘Blur’ to perform this and it almost works. Right now it alerts the user three times every time an inputs is incorrect. I cannot figure out why it fires three times? there must be a more elegant way of achieving this validation with angular/jQuery? maybe a directive? I’m new with angular so any help is greatly appreciated, Thanks!

HTML:

<div ng-repeat="(index, val) in barcodes.barcodes track by $index">
  <div class="form-group row" ng-show="barcodes.barcodes[index]">
    <div ng-if="barcodes.barcodes[index] != 'X'">
      <label class="col-sm-3 form-control-label" style="margin-top:5px"> {{ barcodes.barcodes[index] }} </label>
      <label class="col-sm-2 form-control-label" style="margin-top:5px"> {{ barcodes.A_adaptors[$index+8] }} </label>
      <div class="col-sm-1" style="margin-top:5px">
        <button class="btn btn-xs btn-default hvr-pop" data-toggle="dropdown" ng-click="getIndex($index+8)"><i class="fa fa-cogs" aria-hidden="true" style="color:#DF3D42"></i></button>
          <ul class="dropdown-menu" role="menu">
             <div ng-repeat="x in barcodes.B_adaptors">
               <li class="text-center" ng-click="replace(x)" id="B_adaptors">{{ x }}</li>
             </div>
          </ul>
      </div>
      <div class="col-sm-6">
        <input type="text" class="form-control matching" ng-model-options="{ updateOn: 'blur' }" ng-model="item.barcodeInput" placeholder="Barcode" required>
        <div ng-show="!isEqualToBarcode($index+8, item.barcodeInput)"> Error: Barcode not the same! </div>
      </div>
    </div>
  </div>
</div>

JAVASCRIPT: (in controller)

$scope.isEqualToBarcode = function(index, val) {
    if(val === null || val === undefined) return true;

    if($scope.barcodes.A_adaptors[index] !== val.trim()) {
        console.log("wrong", val);
        alert("Incorrect Barcode, Try Again.");
        val = "";
    }

    return $scope.barcodes.A_adaptors[index] === val.trim();
}

score 0 · Answer 1 · answered Apr 30 '16 at 21:32

0

One way is to change it to an angular form. Angular gives input validation and flags for invalid input. Here is a link to get you started You can also define your own validator directives for the same.

https://docs.angularjs.org/guide/forms

answered Apr 30 '16 at 21:32

Arpit

190
1
4
15

score 0 · Answer 2 · edited May 23 '17 at 12:23

It's because ng-show is expecting a boolean, functions don't usually work as expected in ng-show. Try putting the isEqualToBarcode function on the input inside an ng-blur event.

That being said a better solution would be to use angular's input/form validation, i briefly explained how to use it here but you might want to take a look at the documentation or a tutorial if you're completely new to it. The kind of validation you want doesn't come with angular out of the box, luckily other people have already created a custom directive to handle that. It was made for confirming a password but the basic functionality is still the same (matching 2 values). This might seem like the long way around but trust me it will save you a lot of trouble on the long run.

validating input fields using angular and jquery?

2 Answers2