Apply validation for form fields client side with angular

Question

I am writing a simple form, where I want to save the form result into an array, having both the first name and last name updated, if either or both fields are left empty it should throw an alert message. And the array should not store empty values and I wanted to handle this on the client side. I am kind of confused on how to keep a check on the input values before storing them. Here is the code snippet: https://jsbin.com/guduwakeji/edit?html,js,output

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.ele = [];
  $scope.updateDetails = function(ele) {
    if (!ele.firstname && !ele.lastname) {
      alert("Ele cannot be empty");
    } else {
      ele.push({
        'firstname': '',
        'lastname': ''
      });
      alert(ele.firstname + "  " + ele.lastname);
    }
    console.log(ele);
  };

});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body ng-app="myApp">
  <div ng-controller="formCtrl">
    <div>
      First Name:
      <input type="text" ng-model="ele.firstname">
      </br>
      Last Name:
      <input type="text" ng-model="ele.lastname">
      <br/>
      <input type="button" value="Submit" ng-click="updateDetails(ele)">
    </div>
  </div>
</body>

</html>

Please add the code in question itself.

T J
– T J

2016-06-28 06:42:15 +00:00
Commented Jun 28, 2016 at 6:42 — T J
– T J, Commented Jun 28, 2016 at 6:42
use ng-pristine, ng-dirty ,ng-valid, ng-invalid

Pravesh Khatri
– Pravesh Khatri

2016-06-28 06:44:31 +00:00
Commented Jun 28, 2016 at 6:44 — Pravesh Khatri
– Pravesh Khatri, Commented Jun 28, 2016 at 6:44

uzaif · Accepted Answer · 2016-06-28 06:50:17Z

1

use this code

i figure out this way to validate your form

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.ele={};
    $scope.updateDetails = function(ele){
    if(ele.firstname &&  ele.lastname)
     { console.log(ele);}
      else{
        alert("empty field not allowed");
      }
    };

});

answered Jun 28, 2016 at 6:50

uzaif

3,5512 gold badges24 silver badges36 bronze badges

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

2 Comments

Ritu K Over a year ago

Yes, this also works for me. Thank you. But I have this doubt, we can also use required attribute in the input field right? Along with the model validation.

uzaif Over a year ago

its not working because its not html form required is only work with html form hope you got it

Collectives™ on Stack Overflow

Apply validation for form fields client side with angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related