2

Tenho vários campos e outros em display:none (De antemão aviso que ja andei no stack e até achei uma pergunta semelhante porem não consegui ter o resultado esperado.)

Preciso valida-los, porém preciso habilitar um botão de submit, meu código não está dentro de um formulario, isto é o que tem prejudicado.

Meu código abaixo:

 <style>
  #btn_Codigo,
  #btn_Nome,
  #btn_Sexo{
      display: none;
  }
 </style>

        <div class="upage vertical-col left hidden" id="parte01">
        <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>
        <div style="height: 45px;"></div>

        <div class="tabs widget uib_w_18 ajusteMargin" data-uib="ionic/tab_bar" data-ver="0"><a class="tab-item widget uib_w_19" data-uib="ionic/tab_item" data-ver="0" id="btn_Pessoa">Pessoa</a><a class="tab-item widget uib_w_20" data-uib="ionic/tab_item" data-ver="0" id="btn_Consulta">Consulta</a><a class="tab-item widget uib_w_21"
            data-uib="ionic/tab_item" data-ver="0" id="btn_Pagamento">Pagamento</a>
        </div>
        <label class="item item-input item-select widget uib_w_2 d-margins" data-uib="ionic/select" data-ver="0">
            <div class="input-label">Estatus</div>
            <select id="slc_Situacao">
                <option>Ativo</option>
                <option>Inativo</option>
            </select>
        </label>
        <label class="item item-input widget uib_w_23 d-margins item-stacked-label" data-uib="ionic/input" data-ver="0"><span class="input-label">Ultimo levantamento</span>
            <input type="date" id="dt_UltimoLevantamento">
        </label>
        <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">
        </label>
        <button class="button widget uib_w_4 d-margins button-small button-balanced ion ion-android-contact icon-only" data-uib="ionic/button" data-ver="0" id="btn_NovoCliente"></button>
        <label class="item item-input widget uib_w_5 d-margins borderObrigatorio" data-uib="ionic/input" data-ver="0" id="btn_Codigo">
            <input type="text" placeholder="Código">
        </label>
        <label class="item item-input widget uib_w_6 d-margins borderObrigatorio" data-uib="ionic/input" data-ver="0" id="btn_Nome">
            <input type="text" placeholder="Nome">
        </label>
        <label class="item item-input item-select widget uib_w_7 d-margins" data-uib="ionic/select" data-ver="0" id="btn_Sexo">
            <div class="input-label">Sexo</div>
            <select id="btn_Sexo">
                <option>Masculino</option>
                <option>Feminino</option>
            </select>
        </label>
        <button class="bar button inner-element widget uib_w_8 bar-footer fixedBot  tom button-assertive ion ion-alert-circled" data-uib="ionic/button" data-ver="0" id="btn_Proximo1"></button>
    </div>

Quando clicar no botão #btn_Pessoaeu dou um .show() nos campos para mostra-lo ai ele começa a fazer parte dos requisitos.

Quando todos os campos estiverem corretos preciso de modigicar meu botão para o código abaixo:

ANTERIOR:

<button class="bar button inner-element widget uib_w_8 bar-footer fixedBot  tom button-assertive ion ion-alert-circled" data-uib="ionic/button" data-ver="0" id="btn_Proximo1"></button>

POSTERIOR:

<button class="bar button inner-element widget uib_w_8 bar-footer fixedBot  tom button-balanced" data-uib="ionic/button" data-ver="0" id="btn_Proximo1">PRÓXIMO</button>

Como fazer isso tudo ?

Estou fazendo em HTML5, CSS, JQuery, não tenho um backand, pois o botão apenas redireciona para o próximo nível de cadastro por assim dizer. Atenciosamente.

6
  • Podes dar uma revisão à pergunta e explicar o que deve ser validado um pouco melhor? Queres validar o que é inserido nos inputs e só depois "ir para a frente" e mostrar outros campos, é isso?
    – Sergio
    Commented 9/11/2015 às 14:02
  • @Sergio Na verdade eu quero que os campos estejam preenchidos, so assim eu posso partir pro próximo passo. So preciso que esteja preenchido. Commented 9/11/2015 às 14:22
  • Ok, e esse HTML pode ser mudado? tens IDs repetidas e isso dificulta os seletores. Cada label é um campo a verificar e só depois mostra o próximo label?
    – Sergio
    Commented 9/11/2015 às 14:40
  • Pode ser mudado sim os ID, exatamente, deve verificar a cada input, e so depois de verificar os inputs da pagina ele pode ir para outra. Commented 9/11/2015 às 15:23
  • Podes explicar melhor como queres ir "para outra página"? Escreveste que não tens back-end... os dados são enviados para onde? como queres passar dados de página para página?
    – Sergio
    Commented 9/11/2015 às 15:58

4 Respostas 4

1
+100

Você pode usar uma diretiva do angular para validar conforme abaixo:
(conferir comentários explicativos no JavaScript)

angular.module('myApp', ['ionic']).directive('onValidSubmit', ['$parse', '$timeout',
function($parse, $timeout) {
    return {
        /* Define requisito diretiva, ou seja, só irá rodar dentro da tag form */
        require: '^form',
        restrict: 'A',
        /* Compila diretiva */
        link: function(scope, element, attrs, form) {
            form.$submitted = false;
            var fn = $parse(attrs.onValidSubmit);
            /* Atribui evento onsubmit no form relacionado a diretiva */
            element.on('submit', function(event) {
                scope.$apply(function() {
                    element.addClass('ng-submitted');
                    form.$submitted = true;
                    /* Verificar o estado dos campos que estão presente no form, ou seja, se estão validos de acordo com a validação denifida. Essa obdece o padrão do HTML5 com a tag required */
                    if (form.$valid) {
                        if (typeof fn === 'function') {
                            fn(scope, {
                                /* Chama funcão callback caso a validação esteja OK */
                                $event: event
                            });
                        }
                    }
                });
            });
        }
    };
}]).controller('AppController', function($scope){
    /* Funcao callback executada caso a validação retorne um OK */
    $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>

OBS: Para visualizar o exemplo, abra em modo Página toda. Por algum motivo está cortando o botão próximo.

10
  • Poderia comentar o código ? Pois não adianta eu colocar para funcionar porem não entender o processo. Commented 9/11/2015 às 17:37
  • Vc conhece angular? Sabe sobre diretivas? Qual o teu nível de conhecimento frontend? Commented 9/11/2015 às 17:38
  • 4
    A noite coloco um detalhe explicando cada função pq agora estou trabalhando. Mais já adianto que sem saber de angular vc vai se confundir bastante. Aliás vi que vc está usando o ionic que roda com angular bor baixo dos panos. Se vc quiser explorar todas as facilidades do framework recomendo fortemente que efetue um estudo sobre angular. E qualquer dúvida pode postar aqui na comunidade. Commented 9/11/2015 às 17:44
  • 2
    Certo, somente um comentário que gostaria de fazer. A utilização de outra biblioteca js diferente do angular ao meu ver mata bastante da usabilidade do ionic framework. Mesmo você tendo achado outra resposta que lhe ajudou essa certamente deve usar jquery ou algo do tipo. Sendo assim é uma resposta "menos correta" por não usar algo que já vem embarcado no ionic. Repense bem qual a resposta é mais inteligente. Nem sempre a resposta que vc usou pode ser a ideal para o tópico ;) Commented 12/11/2015 às 11:02
  • 2
    E finalizando da uma olhada aqui: infoq.com/br/presentations/vale-a-pena-usar-cordova-phonegap, palestra muito boa em português que fala justamente sobre cordova +ionic +angular. Esse cara fala inclusive sobre performance e etc... Fala também o pq é ideial usar o angular com ionic (evite acesso ao DOM) . Abraços! Commented 12/11/2015 às 11:05
1

Você pode colocar em todos os input uma classe e no jquery verificar se está vazio, deixa o botão desabilitado, se passar na validação você habilita o botão.

$('.campo').each(function() {
  if ($(this).val() != 0 && $(this).val() != '') {
    $("id_botao").removeAttr("disabled");
  }
});
1

Parece que o botão que será alterado mediante verificações é o btn_Proximo1. Suponho que você queira validar os seguintes elementos:

<input type="text" placeholder="Cliente" id="txtCliente" required>
<input type="text" placeholder="Sexo" id="txtSexo" required>
<input type="text" placeholder="Nome" id="txtNome" required>

Eu atribuiria um class, para todos eles e trataria através de jQuery suas respectivas mudanças de valores: (Supondo que class="validarElemento")

$(".validarElemento").blur(function () {
     var txtCliente = $("#txtCliente").val();
     var txtSexo = $("#txtSexo").val();
     var txtNome = $("#txtNome").val();           

     //condições
     if (txtCliente != "" && txtSexo != "") {
         //Alterar propriedades do botão:
         $("#btn_Proximo1").toggleClass('bar button inner-element widget uib_w_8 bar-footer fixedBot  tom button-balanced');
         $("#btn_Proximo1").val("");
     }        
});
-3

Qual backend você está usando? Se for PHP, da pra fazer o seguinte:

if (isset('submit'){    //substitua o submit pelo nome do primeiro botão que a pessoa precisa clicar para habilitar os outros campos

            $mostrarCampos= "display:none";
        }
        else {
            $mostraCampos = "";
        }
}

Isso vai funcionar mesmo se não estiver dentro do form, mas eu recomendaria colocar tudo dentro do form, uma vez que você vai querer salvar essas informações (as que foram inseridas antes de clicar no botão e as que serão inseridas em seguida) em um banco.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .