Não Validar Se o Capo Estiver Desabilitado.

[Gilberto Jr 26]

Bom dia;

 

Eu tenho esse código que valida se o campo esta vazio ou não. Se tiver vazio ele não deixa salvar os dados do formulário.

<script language="javascript" type="text/javascript">
function validar() {
var nomerecebedor = form1.nomerecebedor.value;

if (nomerecebedor == "") {
alert('Coloque o nome do recebedor!');
form1.nomerecebedor.focus();
return false;
}
}
</script>

Mas se o campo nomerecebedor estiver desabilitado não deve fazer a validação?

 

Como eu devo fazer para que funcione dessa forma?

 

Att;

[William Bruno 1501]

var nomerecebedor = form1.nomerecebedor.value;

 

if (nomerecebedor == "" && form1.nomerecebedor.disabled != "disabled" ) {

[Gilberto Jr 26]

Coloquei assim

<script language="javascript" type="text/javascript">
function validar() {
var nomerecebedor = form1.nomerecebedor.value;

if (nomerecebedor == "" && form1.nomerecebedor.disabled != "disabled" ) {
alert('Coloque o nome do recebedor!');
form1.nomerecebedor.focus();
return false;
}
}
</script>

E mesmo assim se o campo estiver desabilitado ele valida.

 

Att;

[William Bruno 1501]

Exemplo funcionando:

<form action="" id="form">
  <input type="text" id="name" />
  <input type="submit" value="Ok" />
</form>

<script type="text/javascript">
var $name = document.getElementById('name'),
    $form = document.getElementById('form');

$form.addEventListener('submit', function(event){
  if ($name.value === '' && $name.getAttribute('disabled') !== 'disabled') {
    event.preventDefault();
    alert('False');
  }
});
</script>

[Gilberto Jr 26]

Coloquei esse codigo em uma pagina separada

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script ltype="text/javascript">
var $name = document.getElementById('name'),
    $form = document.getElementById('form');

$form.addEventListener('submit', function(event){
  if ($name.value === '' && $name.getAttribute('disabled') !== 'disabled') {
    event.preventDefault();
    alert('False');
  }
});
</script>

<form action="" id="form">
  <input type="text" id="name" />
  <input type="submit" value="Ok" />
</form>

E não funcionou.

 

O meu formulario funciona da seguinte forma... Tenho um <select que se a informação que for selecionada for diferente de Entregue o campo recebedor desabilita.

 

Eu ja consigo fazer a parte do sistema dependendo do que for selecionado o campo fica desabilitado. Dai se o campo esta desabilitado não tem como digitar nenhuma informação. O campo vai ficar vazio mas na hora de fazer o submit não deve validar...

 

Att;

[William Bruno 1501]

<script ltype="text/javascript">

é type e não ltype

[Gilberto Jr 26]

Mesmo assim... Alterei e ele não valida se o campo estiver vazio ele não valida. Faz o submit normal.

 

No caso, caso o campo nome esteja habilitado e sem informação alguma deveria validar dizendo que o campo não pode ficar em branco.

 

Att;

[William Bruno 1501]

Tá funcionando:

 

http://wbruno.github.io/examples/input-disabled/

 

Veja se tem algo diferente ou outro erro na tua integração.

Ctrl + Shift + J no Firefox vai lhe mostrar o console.

[Gilberto Jr 26]

Estou fazendo exatamente do jeito que vc colocou o codigo e não esta dando certo.

 

Abaixo está o meu codigo do form.

<script type="text/javascript">
var $recebedor = document.getElementById('dadosdorecebedor1'),
	$form = document.getElementById('ocorrenciaentrega');

$form.addEventListener('submit', function(event){
  if ($recebedor.value === '' && $recebedor.getAttribute('disabled') !== 'disabled') {
    event.preventDefault();
    alert('False');
  }
});
</script>


<form method="post" action="salvarocorrencia.asp" id="ocorrenciaentrega" name="form1">
<table border="0" style="margin-top:5px;">
  <tr>
    <td colspan="2">
  <script language="javascript" type="text/javascript">
function verificaOpcao( valor ){
  if( valor == "Entregue" ){
        document.getElementById("dadosdorecebedor1").disabled = false;
        document.getElementById("dadosdorecebedor2").disabled = false;
		document.getElementById("dadosdorecebedor3").disabled = false;
		document.getElementById("txtocorrencia4").disabled = false;
		document.getElementById("statusocorrencia1").disabled = true;
  }else if( valor == "Aberto" ){
        document.getElementById("dadosdorecebedor1").disabled = true;
        document.getElementById("dadosdorecebedor2").disabled = true;
		document.getElementById("dadosdorecebedor3").disabled = true;
		document.getElementById("txtocorrencia4").disabled = true;
		document.getElementById("statusocorrencia1").disabled = false;
  }else if( valor == "Pendente" ){
        document.getElementById("dadosdorecebedor1").disabled = true;
        document.getElementById("dadosdorecebedor2").disabled = true;
		document.getElementById("dadosdorecebedor3").disabled = true;
		document.getElementById("txtocorrencia4").disabled = true;
		document.getElementById("statusocorrencia1").disabled = false;
  }
}
</script>
      <strong>Status</strong><br />
      <select name="status" id="statusocorrencia" onchange="verificaOpcao(this.value)">
        <option value="Entregue">Entregue</option>
        <option value="Aberto">Aberto</option>
        <option value="Pendente">Pendente</option>
        </select>
      <input type="hidden" name="identrega" value="<%=request.QueryString("id")%>" />
      <input type="hidden" name="operador" value="<%=session("user")%>" />
    </td>
    </tr>
  <tr>
    <td>
    <strong>Ocorrência</strong><br />
    <select name="ocorrencia" id="statusocorrencia1" disabled="disabled" onchange="verificaOpcao(this.value)">
    <option value="Mudou-se">Mudou-se</option>
    <option value="Desconhecido">Desconhecido</option>
    <option value="Recusado">Recusado</option>
    <option value="Endereço Não Localizado">Endereço Não Localizado</option>
    <option value="Ausente">Ausente</option>
    <option value="Extravio de Produto">Extravio de Produto</option>
    </select>
    </td>
    <td><strong>Observação</strong><br />
    <input type="text" name="observacao" value="" id="txtocorrencia" /></td>
  </tr>
  <tr>
    <td><strong>*Nome Recebedor</strong><br />
    <input type="text" name="nomerecebedor" value="" id="dadosdorecebedor1" />
<script>
window.onload = function() {
  document.getElementById("dadosdorecebedor1").focus();
};
</script>
    </td>
     <td>
     
     <strong>Grau Relacionamento</strong><br />
     <!--<input type="text" name="graurelacionaemnto" value="" id="txtocorrencia4" onkeypress="return teclaEnter(this, event)" />-->
     <select name="graurelacionaemnto" id="txtocorrencia4" style="height:30px;" >
        <option value="Amigo(a)">Amigo(a)</option>
        <option value="Ass/Consumidor">Ass/Consumidor</option>
        <option value="Avo(a)">Avo(a)</option>
        <option value="Cunhado(a)">Cunhado(a)</option>
        <option value="Enteado(a)">Enteado(a)</option>
        <option value="Esposo(a)">Esposo(a)</option>
        <option value="Filho(a)">Filho(a)</option>
        <option value="Funcionário(a)">Funcionário(a)</option>
        <option value="Genro">Genro</option>
        <option value="Irmão(a)">Irmão(a)</option>
        <option value="Madastra">Madastra</option>
        <option value="Mãe">Mãe</option>
        <option value="Namorado(a)">Namorado(a)</option>
        <option value="Neto(a)">Neto(a)</option>
        <option value="Nora">Nora</option>
        <option value="Padastro">Padastro</option>
        <option value="Pai">Pai</option>
        <option value="Porteiro(a)">Porteiro(a)</option>
        <option value="Primo(a)">Primo(a)</option>
        <option value="Sobrinho(a)">Sobrinho(a)</option>
        <option value="Sogro(a)">Sogro(a)</option>
        <option value="Tio(a)">Tio(a)</option>
     </select>
     
     </td>
  </tr>
  <tr>
    <td><strong>Número Documento</strong><br />
    <input type="text" name="numerodocumento" style="text-align:center;" value="" id="dadosdorecebedor3" />
    </td>
     <td><strong>Data Recebimento</strong><br />
     <%
	 set data = conn.execute("select * from entrega order by dataentrega desc limit 0,1")
	 %>
     <input type="text" name="datarecebimento" value="<%=data("dataentrega")%>" style="text-align:center;" id="dadosdorecebedor2"/>     
     </td>
  </tr>
  <tr>
    <td colspan="2">
    <strong>Entregador</strong><br />
    <select name="entregador" id="statusocorrencia">
    <option value="#">Nome</option>
    </select>
    </td>
    </tr>
  <tr>
    <td colspan="2"><input type="submit" id="salvarocorrencia" onclick="return validar()" value="SALVAR" /></td>
    </tr>
</table>
</form>

E não esta dando certo.

 

Att;

[William Bruno 1501]

Coloca a tag script depois do html.

[Gilberto Jr 26]

Bom dia;

 

Agora eu coloquei o script apos o fechamento do html e esta aparecendo a mensagem se o campo recebedor estiver

em branco. Mas se ele estiver desabilitado também aparece o alerta de que o campo esta vazio.

 

O codigo esta assim

<script type="text/javascript">
var $recebedor = document.getElementById('dadosdorecebedor1'),
	$form = document.getElementById('ocorrenciaentrega');

$form.addEventListener('submit', function(event){
  if ($recebedor.value === '' && $recebedor.getAttribute('disabled') !== 'disabled') {
    event.preventDefault();
    alert('Coloque o recebedor!');
  }
});
</script>

Att;

[William Bruno 1501]

Em qual browser vc está testando ?

 

coloque isso:

$form.addEventListener('submit', function(event){
    alert($recebedor.getAttribute('disabled'));

apenas para fins de debug.

 

O que aparece nesse alert ?

[Gilberto Jr 26]

Estou testando no CHROME. O código ficou assim

<script type="text/javascript">
var $recebedor = document.getElementById('dadosdorecebedor1'),
$form = document.getElementById('ocorrenciaentrega');
 
$form.addEventListener('submit', function(event){
    alert($recebedor.getAttribute('disabled'));
});
</script>

 

Se o campo recebedor estiver habilitado aparece NULL no alert e se estiver desabilitado não aparece informação algum mas o alert é mostrado.

 

Att;

[William Bruno 1501]

Com essas informações refaça o IF.

[Gilberto Jr 26]

Ficaria assim o código?

<script type="text/javascript">
var $recebedor = document.getElementById('dadosdorecebedor1'),
	$form = document.getElementById('ocorrenciaentrega');

$form.addEventListener('submit', function(event){
    alert($recebedor.getAttribute('disabled'));
	
  if ($recebedor.value === '' && $recebedor.getAttribute('disabled') !== 'disabled') {
    event.preventDefault();
    alert('Coloque o recebedor!');
  }

});
</script>

Att;