Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Allan Carlos dos Santos G

Check box e Request

Por , em Javascript

Recommended Posts

Allan Carlos dos Santos G    0

Allan Carlos dos Santos G
Postado

Fala galera, tenho um probleminha não sei se tem como fazer, tenho dois campos no formulario, um é de preenchimento de telefone com required e outro ( logo ao lado) com um checkbox e um escrito dizendo: Cliente sem telefone... eu queria que quando o checkbox fosse marcado o required fosse desabilitado no imput, é possível fazer isso? E como? Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Sim, é possível. Depende de como é a sua validação.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Sirotheau    43

Rafael Sirotheau
Postado

Você está utilizando algum plugin jQuery pra fazer a validação? Qual?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então vc vai ter q escrever um js, que ao clicar no checkbox, remove o required do input.

 

E caso clique novamente marcando, coloca o required.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é só um IF

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <form action="" id="form">
    <input type="text" id="name" required="required" />
    <input type="checkbox" id="check" />

    <input type="submit" />
  </form>

<script>
(function(){
  var $name = document.getElementById('name'),
      $check = document.getElementById('check'),
      $form = document.getElementById('form');

  $check.addEventListener('click', function() {
    if (!!this.checked) {
      $name.removeAttribute('required');
    } else {
      $name.setAttribute('required', 'required');
    }
  });

  $form.addEventListener('submit', function(e) {
    e.preventDefault();

    alert('Form Submitted');
  });

}());
</script>
</body>
</html>
Se o check tiver marcado, vc pode enviar o form sem preencher o campo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Qual a dúvida? como vc tentou ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Allan Carlos dos Santos G    0

Allan Carlos dos Santos G
Postado

acho que ta dando algum conflito: olha os codigos:

<script>
(function(){
  var $tel1 = document.getElementById('tel1'),
 $tel2 = document.getElementById('tel2'),
 $tel3 = document.getElementById('tel3'),
      $check1 = document.getElementById('check1'),
 $check2 = document.getElementById('check2'),
 $check3 = document.getElementById('check3'),
      $formulario1 = document.getElementById('formulario1');
 
  $check1.addEventListener('click', function() {
    if (!!this.checked) {
      $tel1.removeAttribute('required');
    } else {
      $tel1.setAttribute('required', 'required');
    }
  });
  
  $check2.addEventListener('click', function() {
    if (!!this.checked) {
      $tel2.removeAttribute('required');
    } else {
      $tel2.setAttribute('required', 'required');
    }
  });
 
   $check3.addEventListener('click', function() {
    if (!!this.checked) {
      $tel3.removeAttribute('required');
    } else {
      $tel3.setAttribute('required', 'required');
    }
  });
  $formulario1.addEventListener('submit', function(e) {
    e.preventDefault();
 
    alert('Form Submitted');
  });
 
}());
</script>

<div class="form-group" >
<div class="col-sm-9 controls">
<div class="row">
<div class="col-xs-4">
<input style="margin-left:20px; " id="tel1" name="cl_celcli"
required="required" placeholder="Tel. Celular (apenas números)" type="text" class="form-control"/>
</div>
<div class="row" >
<div style=" margin-left:20px;" class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" id="check1" aria-label="...">
</span>
<span style=" width:322px; " class="form-control" aria-label="...">Cliente sem telefone Celular.</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</div>
</div>
<div class="form-group" >
<div class="col-sm-9 controls">
<div class="row">
<div class="col-xs-4">
<input style="margin-left:20px; " id="tel2" name="cl_telcli"
required="required" placeholder="Tel. Residencia (apenas números)" type="text" class="form-control"/>
</div>
<div class="row" >
<div style=" margin-left:20px;" class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input id="check2" type="checkbox" aria-label="...">
</span>
<span style=" width:322px; " class="form-control" aria-label="...">Cliente sem telefone Residencial.</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</div>
</div>
<div class="form-group" >
<div class="col-sm-9 controls">
<div class="row">
<div class="col-xs-4">
<input style="margin-left:20px; " id="tel3" name="cl_celcli"
required="required" placeholder="Tel. Comercial (apenas números)" type="text" class="form-control"/>
</div>
<div class="row" >
<div style=" margin-left:20px;" class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input id="check3" type="checkbox" >
</span>
<span style=" width:322px; " class="form-control" aria-label="...">Cliente sem telefone Comercial.</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Aperte Ctrl + Shift + J no Firefox. Leia para entender:

http://wbruno.com.br/javascript-puro/como-debugar-javascript-firefox-erros-comuns/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito