Validate with AngularJS

Question

I have a form that I want to validate with ng-click, I have some required fields e some fields like email.

<form role="form" name="cadastroEmpresa"
      novalidate>

    <div class="row">
        <div class="col-lg-12">
            <div class="col-lg-6">
                <div class="form-group">

                    <label>Nome</label>
                    <input class="form-control"
                           placeholder="Nome da empresa"
                           ng-model="empresa.nome">
                </div>

                <div class="form-group">
                    <label>CNPJ</label>
                    <input
                        id="cnpj"
                        class="form-control"
                        placeholder="Entre com o CNPJ"
                        ng-model="empresa.cnpj">
                </div>

                <div class="form-group">
                    <label>Endereço</label>
                    <input type="email"
                           name="inputemail"
                           class="form-control"
                           placeholder="Entre com o endereço pela empresa"
                           ng-model="empresa.endereco">
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <input
                        type="email"
                        class="form-control"
                        placeholder="Email da empresa"
                        ng-model="empresa.email">
                </div>

            </div>
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Nome do Responsável</label>
                    <input class="form-control"
                           placeholder="Nome do responsável da empresa"
                           ng-model="empresa.nomeResponsavel" required>
                </div>

                <div class="form-group">
                    <label>Telefone</label>
                    <input class="form-control"
                           id="telefone"
                           placeholder="Telefone fixo"
                           ng-model="empresa.telefone" required>
                </div>

                <div class="form-group">
                    <label>Celular</label>
                    <input class="form-control"
                           id="celular"
                           ng-model="empresa.celular"
                           placeholder="Telefone celular">
                </div>

                <div class="form-group">
                    <label>Data de Vencimento</label>
                    <input class="form-control"
                           ng-model="empresa.dataVencimentoMensalidade"
                           placeholder="Data de Vencimento da Mensalidade">
                </div>
            </div>
        </div>
    </div>
</form>

I Want to validate when user clicks the button, and mark in red the field that have erros, but I'm pretty new with angular so I not sure how I do that, if some one could give me example I'll be able to finish my application. Thank you everyone.

You're already using the required property in some fields. Why not in the email field too? — JJJ
– JJJ, Commented Jul 4, 2016 at 13:42
The problem is that is submiting , even with required. I want use $isValid , but don't know how exactly. — William Cézar
– William Cézar, Commented Jul 4, 2016 at 13:48

Community · Accepted Answer · 2017-05-23 11:44:15Z

As mentioned in Gonzalo's answer, "you should be add attribute name to the inputs that you want validate".

After it, you can use ngMessages to validate your inputs.

Here's a snippet working:

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

app.controller('mainCtrl', function ($scope) {
  // Any JS code.
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" ></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript" ></script>     
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>      
  <script src="https://code.angularjs.org/1.4.9/angular-messages.js"></script>        
</head>

<body ng-controller="mainCtrl">
  <form role="form" name="form" novalidate>
     <div class="form-group" ng-class="{ 'has-error' : form.nome.$touched && form.nome.$invalid }">
        <div class="row">
          <div class="col-lg-12">
            <div class="col-lg-6">
              <div class="form-group">
                <label>Nome</label>
                <input name="nome" class="form-control" placeholder="Nome da empresa" ng-model="empresa.nome" required="" />
              </div>
              <div class="help-block" ng-messages="form.nome.$error" ng-if="form.nome.$touched">
                <!-- <div ng-messages-include="error-messages.html"></div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : form.cnpj.$touched && form.cnpj.$invalid }">
        <label>CNPJ</label>
        <input id="cnpj" name="cnpj" class="form-control" placeholder="Entre com o CNPJ" ng-model="empresa.cnpj" required="" />
        <div class="help-block" ng-messages="form.cnpj.$error" ng-if="form.cnpj.$touched">
          <!-- <div ng-messages-include="error-messages.html"></div> -->
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : form.end.$touched && form.end.$invalid }">
        <label>Endereço</label>
        <input name="end" class="form-control" placeholder="Entre com o endereço pela empresa" ng-model="empresa.endereco" required="" />
        <div class="help-block" ng-messages="form.end.$error" ng-if="form.end.$touched">
          <!-- <div ng-messages-include="error-messages.html"></div> -->
        </div>
      </div>
      <div class="form-group" ng-class="{ 'has-error' : form.email.$touched && form.email.$invalid }">
        <label>Email</label>
        <input type="email" name="email" class="form-control" placeholder="Email da empresa" ng-model="empresa.email" />
        <div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$touched">
          <!-- <div ng-messages-include="error-messages.html"></div> -->
        </div>
      </div>
      <div class="col-lg-6" ng-class="{ 'has-error' : form.resp.$touched && form.resp.$invalid }">
        <div class="form-group">
          <label>Nome do Responsável</label>
          <input name="resp" class="form-control" placeholder="Nome do responsável da empresa" ng-model="empresa.nomeResponsavel" required="" />
          <div class="help-block" ng-messages="form.resp.$error" ng-if="form.resp.$touched">
            <!-- <div ng-messages-include="error-messages.html"></div> -->
          </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : form.fixo.$touched && form.fixo.$invalid }">
          <label>Telefone</label>
          <input name="fixo" class="form-control" id="telefone" placeholder="Telefone fixo" ng-model="empresa.telefone" required="" />
          <div class="help-block" ng-messages="form.fixo.$error" ng-if="form.fixo.$touched">
            <!-- <div ng-messages-include="error-messages.html"></div> -->
          </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : form.celular.$touched && form.celular.$invalid }">
          <label>Celular</label>
          <input name="celular" class="form-control" id="celular" ng-model="empresa.celular" placeholder="Telefone celular" />
          <div class="help-block" ng-messages="form.celular.$error" ng-if="form.celular.$touched">
            <!-- <div ng-messages-include="error-messages.html"></div> -->
          </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : form.data.$touched && form.data.$invalid }">
          <label>Data de Vencimento</label>
          <input name="data" class="form-control" ng-model="empresa.dataVencimentoMensalidade" placeholder="Data de Vencimento da Mensalidade" />
          <div class="help-block" ng-messages="form.data.$error" ng-if="form.data.$touched">
            <!-- <div ng-messages-include="error-messages.html"></div> -->
          </div>
        </div>
        <div class="form-group">
          <input type="submit" name="commit" value="Criar empresa" class="btn btn-primary" ng-disabled="form.$invalid">
          <a class="btn btn-default" href="#">Cancelar</a>
        </div>
    </div>
  </form>
</body>

</html>

I would recommend you to check this tutorial also.

PS: As you may have noticed I commented all the "ng-include" (which contains the file that contains all the messages to show when input is invalid) that I put, because I don't know even if is possible to add a new "file" here in snippet, but I'm posting here almost the complete code and you can check the complete here.

error-messages.html:

<p ng-message="required">This field is required</p>
<p ng-message="minlength">This field is too short</p>
<p ng-message="maxlength">This field is too long</p>
<p ng-message="required">This field is required</p>
<p ng-message="email">This needs to be a valid email</p>

I hope it helps!!

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-07-04 14:03:25Z

1

Firstly, you should be add attribute name to the inputs that you want validate. Then In the controller, more specifically in the $scope object, you have available a key with the name of your form, and inside this, keys associated to each input that you added a name attrubute.

Example based in your html:

angular
     .module('exampleApp')
     .controller('ExampleController', Controller);
    Controller.$inject = ['$scope'];
    function Controller($scope){
        var vm = this;
        var theForm = $scope.cadastroEmpresa;
        console.log(theForm);


        vm.handleValidation = function(){
          var theForm = $scope.cadastroEmpresa;
          console.log($scope);
          console.log($scope.cadastroEmpresa);
        }
    }

Working http://codepen.io/gpincheiraa/pen/GqEmNP

edited Jul 4, 2016 at 14:03

answered Jul 4, 2016 at 13:52

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

Comments

Shashank Agrawal · Accepted Answer · 2016-07-04 13:53:00Z

0

Form validation works when automatically when you submit the form. So you should add a submit type button anywhere inside the form like:

<button type="submit" class="btn btn-primary">Submit data</button>

And if you now require proper validation message and if you are using Bootstrap library, you can check out this library to provide validation messages in Angular with Bootstrap.

answered Jul 4, 2016 at 13:53

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Comments

gianni · Accepted Answer · 2016-07-04 15:28:54Z

0

You just need to create a CSS for that, angular already adds the required classes for validation.

this class is added automatically to required fields, you just need to give it your style, for example:

.ng-submitted .ng-invalid {
color: #f00;
border: 1px solid #f00;
}

Codepen: http://codepen.io/giannidk/pen/Bzkkaj?editors=1001

edited Jul 4, 2016 at 15:28

answered Jul 4, 2016 at 15:21

gianni

1,3672 gold badges17 silver badges30 bronze badges

Collectives™ on Stack Overflow

Validate with AngularJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related