habilitar formulario por idade

[danmartinsiss 5]

Bom dia !!

alguem tem ideia de como faz para abrir automatico um modal quando for informado a data de nascimento de um menor de idade??

para que seja obrigatoriamente cadastrado um responsável?

 

segue meu codigo.

 

formulario de cadastro abaixo, entao quando chega na data de nascimento abriria o modal automaticamente se for menor de 18 anos para que seja cadastrado o responsável

<div class="form-group col-md-3">
                    <label for="nascimento">DATA DE NASCIMENTO:</label>
                    <input type="date" class="form-control input-sm" name="data" onKeyPress="MascaraData(cadastro.data);" maxlength="10" onBlur= "ValidaDatacadastro.data);" required>
                  </div>
                  <div class="form-group col-md-3">
                    <label for="rg">RG:</label>
                    <input type="text" class="form-control input-sm" name="rg" id="rg" required>
                  </div>
                  <div class="form-group col-md-3">
                    <label for="rg">ORGÃO EXPEDIDOR:</label>
                    <input type="text" class="form-control input-sm" name="rg" id="rg" requireD>
                  </div>
                  <div class="form-group col-md-3">
                    <label for="chkbox">PACIENTE MENOR DE IDADE?</label>
                    <p>
                      <input type="checkbox" name="habi" id="habi" onClick="HabiDsabi()">
                  </div>
                  <div class="has-error form-group col-md-3">
                    <label for="resp">INFORMAR O RESPONSÁVEL:</label>
                    <button type="button" name="envia" id="envia" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#responsavel" disabled> Resposnsável </button>
                  </div>

Modal do adulto responsável.

<div class="modal fade" id="responsavel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h3 class="modal-title" id="myModalLabel">DADOS DO RESPONSÁVEL</h3>
      </div>
      <div class="modal-body">
        <form name="cadresp">
          <div class="form-group">
            <label for="nome">NOME DO RESPONSÁVEL:</label>
            <input type="text" class="form-control input-sm" name="nome" id="nome" required>
          </div>
          <div class="form-group">
            <label for="nome">ENDEREÇO:</label>
            <input type="text" class="form-control input-sm" name="nome" id="nome" required>
          </div>
          <div class="form-group">
            <label for="nome">BAIRRO:</label>
            <input type="text" class="form-control input-sm" name="nome" id="nome" required>
          </div>
          <div class="form-inline">
            <label for="nome">ESTADO: </label>
            <select type="text" class="form-control input-sm" name="nome" id="nome" required>
              <option>Mato Grosso</option>
            </select>
            <label for="nome">CEP: </label>
            <input type="text" class="form-control input-sm" name="cep" onKeyPress="MascaraCep(cadresp.cep);" maxlength="10" onBlur="ValidaCep(cadresp.cep)"required>
          </div>
          <p></p>
          <p></p>
          <div class="form-group">
            <label for="nome">TELEFONE PRINCIPAL:</label>
            <input type="text" class="form-control input-sm" name="nome" id="nome" required>
          </div>
          <div class="form-group">
            <label for="---o">---O:</label>
            <p>
              <label>
                <input type="radio" name="---o" value="masculino" id="---o_0">
                MASCULINO</label>
              <label>                
                <input type="radio" name="---o" value="feminino" id="---o_1">
                FEMININO</label>
            </p>
          </div>
          <div class="form-group">
            <label for="nascimento">DATA DE NASCIMENTO:</label>
            <input type="date" class="form-control input-sm" name="data" onKeyPress="MascaraData(cadastro.data);" maxlength="10" onBlur= "ValidaDatacadastro.data);" required>
          </div>
          <div class="form-group">
            <label for="rg">RG:</label>
            <input type="text" class="form-control input-sm" name="rg" id="rg">
          </div>
          <div class="form-group">
            <label for="cpf">CPF:</label>
            <input type="text" class="form-control input-sm" name="cpf" onBlur="ValidarCPF(cadastro.cpf);" onKeyPress="MascaraCPF(cadastro.cpf);" maxlength="14" required>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

estou utilizando php nas paginas tbm.

 

hoje fiz apenas que para que o cliente clique num check box para habilitar o modal.

 

agradeco desde ja pela ajuda.

[Beraldo 864]

Seu checkbox chama a função "HabiDsabi" no evento de clique. Nessa função você deve abrir a modal.

 

Isso é feito com Javascript, não PHP. A ideia é parecida com a deste tópico.

 

Movido:

PHP :seta: Javascript

[Snowden 94]

function validateAge(date){

if (!date) return;

else if (/^(\d{4})-(\d{2})-(\d{2})$/.test(date)){

var parse = date.replace(/-/g,'/');

var age = new Date().getFullYear() - new Date(parse).getFullYear();

if (age < 18) $('#responsavel').modal('show');

} else throw new Error('data não corresponde ao formato yyyy-mm-dd');

}

<label for="nascimento">DATA DE NASCIMENTO:</label>

<input [...] onblur="validateAge(this.value);" maxlength="10" required/>

[danmartinsiss 5]

function validateAge(date){
    if (!date) return;
    else if (/^(\d{4})-(\d{2})-(\d{2})$/.test(date)){
     var parse = date.replace(/-/g,'/');
     var age = new Date().getFullYear() - new Date(parse).getFullYear();
     if (age < 18) $('#responsavel').modal('show');
    } else throw new Error('data não corresponde ao formato yyyy-mm-dd');
}

<label for="nascimento">DATA DE NASCIMENTO:</label>
<input [...] onblur="validateAge(this.value);" maxlength="10" required/>

 

 

Hugo Obrigado pela resposta....

o mas nao esta abrindo o modal

 

eu preciso mostrar o cauculo da idade???

[Snowden 94]

[...]

o mas nao esta abrindo o modal

 

eu preciso mostrar o cauculo da idade???

 

 

[...] para abrir automatico um modal quando for informado a data de nascimento de um menor de idade [...]

 

 

:sleep:

 

basta informa a data de nascimento , experimente informa qualquer uma após 01/01/1998.

exemplo: 2015 - 1998 = 17 (menor de idade) abre modal