validation - Validate with AngularJS -
i have form want validate ng-click, have required fields e fields 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 responsável</label> <input class="form-control" placeholder="nome 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 validate when user clicks button, , mark in red field have erros, i'm pretty new angular not sure how that, if 1 give me example i'll able finish application. thank everyone.
as mentioned in gonzalo's answer, "you should add attribute name inputs want validate".
after it, can use ngmessages validate inputs.
here's snippet working:
var app = angular.module('app', ['ngmessages']); app.controller('mainctrl', function ($scope) { // 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 responsável</label> <input name="resp" class="form-control" placeholder="nome 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 recommend check tutorial also.
ps: may have noticed commented "ng-include" (which contains file contains messages show when input invalid) put, because don't know if possible add new "file" here in snippet, i'm posting here complete code , can check complete here.
error-messages.html:
<p ng-message="required">this field required</p> <p ng-message="minlength">this field short</p> <p ng-message="maxlength">this field long</p> <p ng-message="required">this field required</p> <p ng-message="email">this needs valid email</p> i hope helps!!
Comments
Post a Comment