4

Estou realizando a validação de data para dois campos <input type="text"> com o jQueryFormValidator:

        $.validate({
            modules : 'date'
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>

<form>

<input type="text" class="form-control" name="Tdesl"  maxlength="10" data-validation="date" data-validation-format="dd/mm/yyyy" placeholder="dd/mm/aaaa" OnKeyPress="formatar('##/##/####', this)" id="Cdesl22"></label>

    <input class="form-control" type="text" data-validation="date" data-validation-format="dd/mm/yyyy" maxlength="10" placeholder="dd/mm/aaaa" OnKeyPress="formatar('##/##/####', this)" name="Tinsem3" id="Cinsem"></label>

</form>

Mas não consigo fazer com que, ao serem validados esses campos, que um botão (<button="button"> não é um submit) seja habilitado.

Segundo algumas respostas que vi no SOen, o jQueryFormValidator não tem suporte nativo pra esta função, então estou tentando adaptar esse script (o link é do FIDDLE, mas achei pelo SOen):

    $('#myform > input').on('input', function () {
        var empty = false;
        $('form > input, form > select').each(function () {
            if ($(this).val() == '') {
                empty = true;
            }
        });
    
        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">Username
    <br />
    <input type="text" class="class" id="user_input" name="username" />
    <br />Password
    <br />
    <input type="password" id="pass_input" name="password" />
    <br />Confirm Password
    <br />
    <input type="password" id="v_pass_input" name="v_password" />
    <br />Email
    <br />
    <input type="text" id="email" name="email" />
    <br />Birthday
    <br />
    <input type="date" id="bday" name="birthday" />
    <br />Sex
    <br />
    <select name="sex" id="sex">
        <option>Male</option>
        <option>female</option>
    </select>
    <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

Contudo, este script requer que todos os campos input sejam preenchidos, e preciso que sejam apenas dois (existem mais campos no formulário, e preciso que apenas dois deles sejam observados). Tentei criar uma classe pra aplicar nestes dois campos, mas acho que não fiz direito:

$('#myform > .classinput').on('input', function () {

Além disso, este script usa o type date, enquanto no meu caso estou utilizando campos do type text, mas que estão sendo validados para data, então se fosse possível utilizar o resultado da validação (pra habilitar o botão) seria o ideal, mas senão der pode ser apenas com as regras básicas, tipo aceitar para o dia no máximo 31, no mês 12, no ano 2015, etc.

2 Respostas 2

2

Fiz uma alteração com a classe obrig para os campos validados:

$('#myform > input').on('input', function () {
    var empty = false;
    $('form > .obrig').each(function () {
        if ($(this).val() == '' ) {
            empty = true;
        }else {
            empty = false;
        }
    });
     if (empty) {
        $('#register').attr('disabled', 'disabled');
    } else {
        $('#register').removeAttr('disabled');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">Username
    <br />
    <input type="text" class="obrig" id="user_input" name="username" />
    <br />Password
    <br />
    <input type="password" class="obrig"  id="pass_input" name="password" />
    <br />Confirm Password
    <br />
    <input type="password" id="v_pass_input" name="v_password" />
    <br />Email
    <br />
    <input type="text" id="email" name="email" />
    <br />Birthday
    <br />
    <input type="date" class='obrig' id="bday" name="birthday" />
    <br />Sex
    <br />
    <select name="sex" id="sex">
        <option>Male</option>
        <option>female</option>
    </select>
    <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

3
  • Legal +1, agora falta só validar o campo como data antes de habilitar o botão.
    – gustavox
    Commented 29/05/2015 às 0:23
  • coloca a class='obrig' que resolve Commented 29/05/2015 às 1:15
  • Então, mas o campo é text, e tem que ser validado pra data antes de abrir o botão. Neste caso ele só vai requerer que tenha qualquer preenchimento, como se fosse um campo de texto, e preciso que ou ele pegue pela validação que to usando (form-validator), ou que faça uma outra, mas que qualquer forma ele valide que é uma data correta antes de habilitar o botão...
    – gustavox
    Commented 29/05/2015 às 1:45
1

Vejamos

De jQuery não entendo quase nada - prefiro o meu código em JavaScript puro (sem frameworks). Acabei por aprender um bocado de jQuery tentando solucionar seu problema. E no final, acho que foi solucionado..


Explicação

Segue uma breve explicação do código e do processo. Talvez facilite o entendimento.

No JS

  • Adicionei o $.validate(); pois precisava verificar se a checagem da data funcionava corretamente com o código, obviamente;
  • Em $.validate();, adicionei o return(false) para impedir o envio do formulário no caso de haver outras checagens de outros elementos do formulário;
  • Dentro do escopo de $('form > .checarData'), acresci o .on('validation', ... para que houvesse uma forma de determinar a ativação do botão;

No HTML

  • o elemento de ID #aniv2 serve como espelho do elemento de ID #aniv1. Ou seja, o que tiver em #aniv1 terá em #aniv2.

No caso, quantas mais datas a a serem validadas você tive, cada uma delas terá que ter um elemento espelho. Por quê?

Veja: o jQuery Form Validator precisa que o atributo type seja igual a text como você mesmo disse. MAS, depois que o formulário for enviado, você vai precisar que ele seja do tipo date.

Assim, tendo os dois elementos, sendo um espelho do outro, você consegue validar a data e ainda assim obter o formulário com o campo 'aniversário' do tipo date para formatar na página destino, seja qual for. E como um deles está oculto, o usuário não irá enxergar esse elemento espelho.


Código & Exemplo

$.validate({
    modules: 'date',
    onSuccess: function () {

        /* Impede o envio do formulário */
        return (false);

    }
});

/* 'form' é a TAG mesmo */
$('form > .checarData').on('validation', function (evt, valid) {

    /* Copia #aniv1 em #aniv2 */
    document.getElementById("aniv2").value = document.getElementById("aniv1").value;
    
    /* Verifica se o campo não está vazio E SE a data está OK */
    if (valid) {
        $('#registrar').removeAttr('disabled');
    } else {
        $('#registrar').attr('disabled', 'disabled');
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>

<form id="formulario">

  Usuário
  <br />
  <input type="text" id="user" name="username" />

  <br />Email
  <br />
  <input type="text" id="email" name="email" />

  <br />Aniversário
  <br />
  <input type="text" id="aniv1" name="aniv1" class="checarData" data-validation="birthdate" data-validation-format="dd/mm/yyyy" />

  <!-- Espelho de #aniv1, porém do tipo "date" -->
  <input type="date" id="aniv2" name="aniv2" hidden="hidden" />

  <br />

  <input type="button" id="registrar" value="Registrar" disabled="disabled" />

</form>


Notas

Você deve entender de jQuery o suficiente para saber como inserir o .on('input', ... no lugar de .on('blur', .... Eu realmente não sou o mestre nesse framework e nunca usei ele diretamente profissionalmente - somente quando aparece em bibliotecas de terceiros em sistemas não desenvolvidos por mim.

Ah! Por via das dúvidas, JSFiddle para garantir!

Espero ter ajudado!

10
  • Cara, com certeza vai ajudar muito! +1 Só as explicações que vc deu já me ajudaram a entender muita coisa aqui... Tô estudando o código e tentando implementar, mas não tenho conhecimento profundo em jQuery não (sou bem iniciante aliás)... Vou passando aqui o resultados... Valeu mesmo!
    – gustavox
    Commented 29/05/2015 às 16:52
  • Então, ele faz a validação da data no campo text, mas não habilita o botão. Mesmo no JsFiddle, ou no exemplo acima, não está funcionando a habilitação. Estou fazendo uns testes aqui, mas não preciso que verifique se o campo está vazio, se ele estiver com a data certa, não precisa verificar se está vazio (nenhum, só o de data mesmo). Não entendi muito bem o porque dos campos input com hidden... inspecionando pelo navegador dá pra ver a tag form modificando de error pra has-sucess, quando valida... não dá pra usar isso como parâmetro pra habilitar o botão, isto é, se for has-sucess habilita?
    – gustavox
    Commented 29/05/2015 às 18:43
  • Isso que falei de ver a tag form alterando pra has success é no chrome, em Elements.
    – gustavox
    Commented 29/05/2015 às 19:03
  • Valeu ae José, adaptei aqui e funcionou, postei uma resposta pra mostrar o que fiz, dá uma olhada pra ver se tem algo que possa melhorar... Abraços.
    – gustavox
    Commented 30/05/2015 às 2:33
  • 1
    Alterei a resposta, e reduzi um pouco mais o código. Ele só estava grande por que eu achei que precisasse haver a checagem dos campos em branco que requeria a conversa de variáveis de dois escopos diferentes sem a aparente possibilidade de usar variáveis globais. Acabou por eliminar um elemento oculto que servia de uma espécie de variável global. Resumindo: o escopo do jQuery não estava me permitindo criar globais dentro do JSFiddle ou o snippet do StackOverflow. Ou seja, usando um elemento oculto para armazenar dados, burlei o escopo das variáveis "do jQuery"! :) Mas não precisa mais.
    – José
    Commented 30/05/2015 às 3:19

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 .