angular.module('myApp', ['ionic'])
.directive('onValidSubmit', ['$parse', '$timeout',
function($parse, $timeout) {
return {
require: '^form',
restrict: 'A',
/* Define link:requisito function(scopediretiva, element,ou attrsseja, form) {
só irá rodar dentro da tag form.$submitted = false;*/
var fn =require: $parse(attrs.onValidSubmit);'^form',
restrict: element.on('submit''A', function(event) {
/* Compila scope.$apply(function()diretiva {*/
link: function(scope, element, attrs, element.addClass('ng-submitted'form);
{
form.$submitted = true;false;
var fn if= $parse(formattrs.$validonValidSubmit) {;
/* Atribui evento onsubmit ifno (typeofform fnrelacionado ===a 'function')diretiva {*/
fnelement.on(scope'submit', {
$event: function(event
});
}{
}
}scope.$apply(function();
});{
}
}
}
])
element.directive('validated', ['$parse',
functionaddClass($parse'ng-submitted') {;
return {
restrict: 'AEC',
form.$submitted require:= '^form',true;
link: function(scope, element, attrs, form) {
/* varVerificar inputso =estado element.find("*");
dos campos que estão presente no form, ou seja, se forestão (varvalidos ide =acordo 0;com ia <validação inputsdenifida.length; i++) {
Essa obdece o padrão do HTML5 com a tag (function(input)required {*/
var attributes = input.attributes;
if (attributes.getNamedItem('ng-model') != void 0 && attributesform.getNamedItem('name') != void 0$valid) {
var field = form[attributes.name.value];
if (fieldtypeof !=fn void=== 0'function') {
scope.$watch(function() {
return form.$submitted + "_" + field.$valid;
}, functionfn()scope, {
if (form.$submitted != true) return;
/* Chama funcão callback caso a varvalidação inpesteja =OK angular.element(input);*/
if (inp.hasClass('ng-invalid')) {
$event: event
element.removeClass('has-success');
element.addClass('has-error'});
} else {
element.removeClass('has-error').addClass('has-success');}
}
});
});
}
})(inputs[i]);
}
]).controller('AppController', function($scope){
}
/* Funcao callback executada caso a }
validação retorne um OK }*/
]).controller('AppController', function($scope){
$scope.aposValidarDadosOK = function(){
console.log("Proximo.......");
};
});
#btn_Codigo,
#btn_Nome,
#btn_Sexo {
display: none;
}
input.ng-dirty.ng-invalid {
border: 1px solid red;
}
form i.icon.error {
color: #ef4e3a;
}
form input + i.icon.error {
display: none;
margin-left: 8px;
}
form select + i.icon.error {
display: none;
margin-left: 8px;
}
form.ng-submitted input.ng-invalid + i.icon.error {
display: block;
}
form.ng-submitted select.ng-invalid + i.icon.error {
display: block;
}
form .has-error {
border-left: 3px solid #cc2511;
border-right: 3px solid #cc2511;
}
form .has-success {
border-left: 3px solid #3d8b3d;
border-right: 3px solid #3d8b3d;
}
form.ng-submitted input.ng-valid + i.icon.error {
display: none;
}
form.ng-submitted select.ng-valid + i.icon.error {
display: none;
}
.validated {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 0px;
width: 100%;
}
.validated .input-label {
-webkit-box-flex: 0;
-webkit-flex: 0 0 30%;
-moz-box-flex: 0;
-moz-flex: 0 0 30%;
-ms-flex: 0 0 30%;
flex: 0 0 30%;
max-width: 30%;
}
.validated input {
-webkit-box-flex: 0;
-webkit-flex: 0 0 60%;
-moz-box-flex: 0;
-moz-flex: 0 0 60%;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
.validated error {
-webkit-box-flex: 0;
-webkit-flex: 0 0 10%;
-moz-box-flex: 0;
-moz-flex: 0 0 10%;
-ms-flex: 0 0 10%;
flex: 0 0 10%;
max-width: 10%;
}
.item-stacked-label i.icon.error {
position: absolute;
top: 10px;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="http://code.ionicframework.com/1.1.0/css/ionic.css">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.min.js"></script>
<script src="http://code.ionicframework.com/1.1.0/js/ionic-angular.js"></script>
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<div class="upage vertical-col left hidden" ng-app="myApp" ng-controller="AppController">
<ion-header-bar class="bar inner-element uib_w_1 bar-positive bar-header" data-uib="ionic/header" data-ver="0">
<div class="buttons widget-container content-area horiz-area wrapping-col"></div>
<h1 class="title">Cadastro de Tratamento</h1>
<div class="buttons widget-container content-area horiz-area wrapping-col">
<div class="button-bar widget uib_w_16 d-margins" data-uib="ionic/button_bar" data-ver="0"></div>
</div>
</ion-header-bar>
<br>
<br>
<div style="margin:10px;">
<form novalidate="novalidate" on-valid-submit="aposValidarDadosOK()">
<label class="item item-input item-select widget uib_w_2 d-margins" data-uib="ionic/select" data-ver="0">
<div class="input-label">Status</div>
<select id="slc_Situacao" required ng-model="status">
<option></option>
<option>Ativo</option>
<option>Inativo</option>
</select>
<i class="icon ion-alert-circled error">*</i>
</label>
<br>
<br>
<label class="item item-input widget uib_w_3 d-margins borderObrigatorio" data-uib="ionic/input" data-ver="0" id="txt_Cliente">
<i class="icon placeholder-icon ion-android-search ion"></i>
<input type="text" placeholder="Cliente" ng-model="cliente" required>
<i class="icon ion-alert-circled error col col-10">*</i>
</label>
<br>
<br>
<div>
<button type="submit" class="button icon-right ion-chevron-right button-block button-energized active">
Próximo
</button>
</div>
</form>
</div>
</div>