how to validate form using name or id attribute in angular Js

Question

In form I have controls with name,id and class attribute. I cant add any costom attribute in html input element. In this case how can I apply validation.

Can I write directive on element name or id?

HTML

<form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit(DTOstep1)" novalidate>
<input name="userinput1" id="userinput1" class="" />
<input name="userinput2" id="userinput2" class="" />
<input name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" />
</form>

directive code

(function () {
    "use strict";

    angular
            .module("autoQuote")
            .directive('userinput1', [userinput1])
            ....

Or is there any other way to do form validation. I wan to apply some custom validation to each form field.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The angular way requires the ng-model attribute to each field, in order to bind it with a model property.

function TestCtrl($scope) {
  $scope.fields = {
    "userinput1" : "Initial Value",
    "userinput2" : ""
  }
  
  $scope.onSubmit = function onFormSubmit($event, form) {
    if(form.$invalid) {
      console.log("invalid", form);
      event.preventDefault();
      return;
    }
    
    console.log('valid', form);
    //send here
  };
}
angular
  .module('test', [])
  .controller("TestCtrl", ["$scope", TestCtrl])
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
  <article ng-controller="TestCtrl">
    <form name="DTOstep1" ng-submit="onSubmit($event, DTOstep1)">
      
      <input name="userinput1" ng-model="fields.userinput1" required/>
      <input name="userinput2" ng-model="fields.userinput2" required />
      
      <input name="saveDto" type="submit" ng-disabled="DTOstep1.$pristine || DTOstep1.$invalid" />
</form>
  </article>
</section>

by the way, if you can't edit the view in order to create an angular-form, you need to control the form via dom queries, such as vanilla javascript... using document.querySelector() and checking value property.

UPDATE

Many basic check could be made using simple procedural approach, if you want apply a minlength to the userinput1 field, on each onSubmit you need to check $scope.fields.userinput1.length > ..., et cetera...

A more clean and suggested way is to use html5 validation attributes, angular decorates them and recognize thei rules, so, you can use min/max/min-length/max-length/required/pattern/disabled etc.

if you want to provide a reusable way, you should have a look at FormController.$addControl or how build a custom directive via attributes that requires ngModelController and so on...

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 1, 2016 at 7:31

Hitmands

14.2k4 gold badges41 silver badges78 bronze badges

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

7 Comments

Praveen D Over a year ago

using TestCtrl an ng-model is helpfull. how can I apply validation on input here?

Praveen D Over a year ago

Can I make rules that I can apply to fields, so that we could reuse rules for multiple filed if required.

Praveen D Over a year ago

If I make attribute like myInput="userinput1" and for next myInput="userinput2". then can I apply validation on myInput attribute value.

Praveen D Over a year ago

Hitmands Over a year ago

the myInput attribute doesn't exist... what do you mean with it? A custom Directive? For doing what?

|

Gaurav Srivastava · Accepted Answer · 2016-08-01 09:56:46Z

0

Add required to those fields on which you want to add validation -

'use strict';
 var app = angular.module("demo", [], function($httpProvider) {

});

app.controller("demoCtrl", function($scope) {
    $scope.onSubmit = function(){
      alert('form valid');
      }

});

<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>
<body ng-app="demo">
<div ng-controller="demoCtrl">
<form name="form" id="form" class="form-horizontal text-center" role="form" >
<input ng-required="true" ng-model="userinput1" name="userinput1" id="userinput1" class="" /><br>
Check it to make userinput 2 required:  <input type="checkbox" ng-model="check" />
<input  ng-required="check" ng-model="userinput2" name="userinput2" id="userinput2" class="" />
<br><input ng-click="onSubmit(DTOstep1)" ng-disabled="form.$invalid" name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" /><br>
</form>
  </div>
</body>

you can also use ng-model inside ng-required to toggle the ng-required true and false.

edited Aug 1, 2016 at 9:56

answered Aug 1, 2016 at 7:17

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

5 Comments

Praveen D Over a year ago

require is there with all fields. i want to apply some custom validations.

Praveen D Over a year ago

I didn't understand your answer. Can you please explain?

Gaurav Srivastava Over a year ago

what kind of custom validation you want?

Praveen D Over a year ago

something like check value in a set. or validate from server call(Ajax)

Gaurav Srivastava Over a year ago

i have added checkbox validation just for demo purpose it can be as complex as you want and for server validation you have to do it in controller onsubmit function

Yatin Gera · Accepted Answer · 2016-08-01 11:30:00Z

0

angular automatically adds classed to each ng-model

This should help https://docs.angularjs.org/guide/forms

Adding a fiddle as an example

https://jsfiddle.net/x0f6czfk/

<body ng-app="app">
  <form ng-controller="mainCtrl">
    <input ng-model="name" type="text">
    <input ng-model="email" type="text">
    <input type="button" ng-click="validateForm()" value="Save">
  </form>
</body>

(function(window,document,undefined){
var app = angular.module('app',[]);


  app.controller('mainCtrl',function($scope){
    var self = this;
    $scope.validateForm = function(){
    //custom validation
        if($scope.name === 'test'){
        console.log('wrong name');
        return;
      }
     //custom validation
     if($scope.email === '[email protected]'){
                console.log('wrong email');
          return;
        }
      else{
      //if no validation error, submit data;
        console.log('valid form');
      }
    }
  });
})(window,document)

edited Aug 1, 2016 at 11:30

answered Aug 1, 2016 at 7:07

Yatin Gera

1911 silver badge7 bronze badges

1 Comment

Praveen D Over a year ago

Yes, but those classes are same for all controls. How to distinguish each field. Like I want to apply validation form userinput1 only.

Collectives™ on Stack Overflow

how to validate form using name or id attribute in angular Js

3 Answers 3

UPDATE

7 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

UPDATE

7 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related