CODEWITHSUNDEEP
angularjs
Vivin Prasannaa
Vivin Prasannaa

Reputation: 140

Allow to next field through tab , only after the current input is valid

for example suppose if i am having three fields like below

first name - min 5 chars

last name -- min 5 chars

phone number - has to be digit

user is in first field (first name), if he press tab without entering any value ,it should not move to second field but should show error first name should be minimum 5 characters.

also user cannot input to next field by clicking mouse also

anyone please help to achieve this in angularjs

Upvotes: 0

Views: 934

Answers (2)

Vivek Verma
Vivek Verma

Reputation: 303

This is a good solution Yaser. But you can add focus event to achieve complete requirement. This focus event will not allow you to jump to any other input filed until it is filled .

var app = angular.module('myApp', []);

app.directive('minLen', function() {
  // Linker function
  return function(scope, element, attrs) {
    element.bind('focusout', function(e) {
      console.log(this.id);
        if (this.value.length < 5) {
          console.log(keyCode);
          $('.' + this.id + 'Error').show();
          e.preventDefault();
          this.focus();

        } else {
          $('.' + this.id + 'Error').hide();
        }

    });
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">


  <div>
    Name:
    <input id="name" type="text" min-len="5" />
    <span class="nameError" style="color:red; display:none">Name should at least be 5 char long</span>
  </div>

  <div>
    Last name:
    <input id=last type="text" min-len="5" />
    <span class="lastError" style="color:red; display:none">Last name should at least be 5 char long</span>
  </div>

  <div>
      Phone: <input type="number" />
  </div>

</div>

Upvotes: 0

Yaser
Yaser

Reputation: 5719

You have to write a directive to do that:

var app = angular.module('myApp', []);

app.directive('minLen', function() {
  // Linker function
  return function(scope, element, attrs) {
    element.bind('keydown', function(e) {
      var keyCode = e.keyCode || e.which;
      console.log(this.id);
      if (keyCode == 9) {
        if (this.value.length < 5) {
          console.log(keyCode);
          $('.' + this.id + 'Error').show();
          e.preventDefault();

        } else {
          $('.' + this.id + 'Error').hide();
        }
      }
    });
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">


  <div>
    Name:
    <input id="name" type="text" min-len="5" />
    <span class="nameError" style="color:red; display:none">Name should at least be 5 char long</span>
  </div>

  <div>
    Last name:
    <input id=last type="text" min-len="5" />
    <span class="lastError" style="color:red; display:none">Last name should at least be 5 char long</span>
  </div>

  <div>
      Phone: <input type="number" />
  </div>

</div>

And for phone number just use type="number".

Upvotes: 1

Related Questions