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();
}

Arpit · Accepted Answer · 2016-04-30 21:32:34Z

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, 2016 at 21:32

Arpit

3101 gold badge6 silver badges16 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:23:56Z

0

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.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Apr 30, 2016 at 21:47

Ahmed Wagdi

9345 silver badges9 bronze badges

Collectives™ on Stack Overflow

validating input fields using angular and jquery?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related