Ir para conteúdo

POWERED BY:

Arquivado

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

Physyx

Validação com spry validation e javascript

Por , em Javascript

Recommended Posts

Physyx    0

Physyx
Postado

Boa noite.

 

Estou fazendo uma aplicação para ajudar no cadastro de requisição de compras do meu trabalho.

Na aplicação os primeiros campos são validados com spry validation porém para validar o campos de ítens, escrevi um código javascript na própria página.

 

Quando uso somente o spry validation funciona tudo normal exceto a validação do campo de ítens porém quando coloco o javascript, utilizando uma função que é chamada no form <form name='xxx' method='xxx' action='xxx' onsubmit='return valida_form()'>, o spry validation para de funcionar porém a validação dos campos funciona.

 

Alguém tem uma idéia para resolver esse conflito?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mostre o código da validação do DW para analisarmos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Physyx    0

Physyx
Postado

Segue o código.

 

Não usei um for no script de validação por que não estava conseguindo fazer um incremento do nome do campo, por isso tá enorme.

</style>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="apDiv1"><img src="imagem/logo.jpg" width="210" height="87" /></div>
<h2>                                 <strong>       REQUISIÇÃO DE COMPRAS</strong> FO-SGI-008</h2>

<script>
function verifica_itens()
{
if(form1.it1.checked==false && form1.it2.checked==false && form1.it3.checked==false && form1.it4.checked==false && form1.it5.checked==false &&form1.it6.checked==false && form1.it7.checked==false && form1.it8.checked==false && form1.it9.checked==false && form1.it10.checked==false)  
{
alert("A requisição deve ter pelo menos um ítem inserido");
return false;
}

var ar = new Array(i);
var i=0;
ar.length=0;

if(form1.it1.checked==true && form1.quantidade1.value=="" && form1.espec1.value=="")
{
ar[i]=" 1";
i=i+1;
}
if(form1.it2.checked==true && form1.quantidade2.value=="" && form1.espec2.value=="")
{
ar[i]=" 2";
i=i+1;
}
if(form1.it3.checked==true && form1.quantidade3.value=="" && form1.espec3.value=="")
{
ar[i]=" 3";
i=i+1;
}
if(form1.it4.checked==true && form1.quantidade4.value=="" && form1.espec4.value=="")
{
ar[i]=" 4";
i=i+1;
}
if(form1.it5.checked==true && form1.quantidade5.value=="" && form1.espec5.value=="")
{
ar[i]=" 5";
i=i+1;
}
if(form1.it6.checked==true && form1.quantidade6.value=="" && form1.espec6.value=="")
{
ar[i]=" 6";
i=i+1;
}
if(form1.it7.checked==true && form1.quantidade7.value=="" && form1.espec7.value=="")
{
ar[i]=" 7";
i=i+1;
}
if(form1.it8.checked==true && form1.quantidade8.value=="" && form1.espec8.value=="")
{
ar[i]=" 8";
i=i+1;
}
if(form1.it9.checked==true && form1.quantidade9.value=="" && form1.espec9.value=="")
{
ar[i]=" 9";
i=i+1;
}
if(form1.it10.checked==true && form1.quantidade10.value=="" && form1.espec10.value=="")
{
ar[i]=" 10";
i=i+1;
}
if(ar.length!=0)
{
var str = ar.join(", ");
alert("O campo quantidade e o campo especificação do(s) ítem(ns) "+str+" devem ser preenchidos");
return false;
}
}
</script>



<form id="form1" name="form1" method="post" action="cadastra_requi.php" onsubmit="return verifica_itens()">
 <p> </p>
 <p><a href="index.html"><br />
   Home</a> - <a href="consulta.html">Consultar requisição</a> - <a href="mailto:bruno.peixoto@gcomex.com.br">Relatar problema</a><br />
 </a><br />
   Solicitante
   <br />
   <label for="solicitante"></label>
   <span id="sprytextfield1">
   <input type="text" name="solicitante" id="solicitante" />
 <span class="textfieldRequiredMsg">Digite o nome do solicitante.</span></span></p>
 <p>Empresa<br />
   <label for="empresa"></label>
   <span id="spryselect1">
   <select name="empresa" id="empresa">
     <option selected="selected">--</option>
     <option value="AG">G-Comex Armazéns</option>
     <option value="GC">G-Comex Óleo e Gás</option>
     <option value="HR">HRoil</option>
   </select>
   <span class="selectInvalidMsg">Selecione uma empresa.</span><span class="selectRequiredMsg">Please select an item.</span></span></p>
 <p>Departamento<br />
   <label for="depart"></label>
   <span id="spryselect2">
   <select name="depart" id="depart">
     <option selected="selected">--</option>
     <option value="1">Administrativo</option>
     <option value="2">Base</option>
     <option value="3">Comercial</option>
     <option value="4">Diretoria</option>
     <option value="5">DP</option>
     <option value="6">Financeiro</option>
     <option value="7">Marketing</option>
     <option value="8">Presidência</option>
     <option value="9">RH</option>
     <option value="10">Secretaria</option>
     <option value="11">T.I.</option>
   </select>
   <span class="selectInvalidMsg">Selecione uma empresa.</span><span class="selectRequiredMsg">Please select an item.</span></span></p>
 <p>Tipo<br />
   <label for="tipo"></label>
   <span id="spryselect3">
   <select name="tipo" id="tipo">
     <option selected="selected">--</option>
     <option value="1">Requisição Material</option>
     <option value="2">Requisição Serviço</option>
   </select>
   <span class="selectInvalidMsg">Selecione uma empresa.</span><span class="selectRequiredMsg">Please select an item.</span></span></p>
 <p>Natureza<br />
   <label for="natureza"></label>
   <span id="spryselect4">
   <select name="natureza" id="natureza">
     <option selected="selected">--</option>
     <option value="1">Emergencial</option>
     <option value="2">Manutenção</option>
     <option value="3">Preventiva</option>
   </select>
   <span class="selectInvalidMsg">Selecione uma empresa.</span><span class="selectRequiredMsg">Please select an item.</span></span></p>
 <table width="722" border="0">
   <tr align="center">
     <td>Item</td>
     <td>Unidade</td>
     <td>Quantidade</td>
     <td>Especificação</td>
     <td>Modelo</td>
     <td>Fabricante</td>
     <td><div align="center"></div>
     <label for="it1"></label></td>
   </tr>
   <tr>
     <td width="27">1
       <label for="item1"></label></td>
     <td width="51"><label for="unidade1"></label>
     <input name="unidade1" type="text" id="unidade1" size="8" /></td>
     <td width="144"><input type="text" name="quantidade1" id="quantidade1" /></td>
     <td width="144"><input type="text" name="espec1" id="espec1" /></td>
     <td width="144"><input type="text" name="mod1" id="mod1" /></td>
     <td width="144"><input type="text" name="fab1" id="fab1" /></td>
     <td width="38"><label for="it1">
       <div align="center">
         <input type="checkbox" name="it1" id="it1" />
       </div>
     </label></td>
   </tr>
   <tr>
     <td>2</td>
     <td><input name="unidade2" type="text" id="unidade2" size="8" /></td>
     <td><input type="text" name="quantidade2" id="quantidade2" /></td>
     <td><input type="text" name="espec2" id="espec2" /></td>
     <td><input type="text" name="mod2" id="mod2" /></td>
     <td><input type="text" name="fab2" id="fab2" /></td>
     <td><div align="center">
       <input type="checkbox" name="it2" id="it2" />
     </div></td>
   </tr>
   <tr>
     <td>3</td>
     <td><input name="unidade3" type="text" id="unidade3" size="8" /></td>
     <td><input type="text" name="quantidade3" id="quantidade3" /></td>
     <td><input type="text" name="espec3" id="espec3" /></td>
     <td><input type="text" name="mod3" id="mod3" /></td>
     <td><input type="text" name="fab3" id="fab3" /></td>
     <td><div align="center">
       <input type="checkbox" name="it3" id="it3" />
     </div></td>
   </tr>
   <tr>
     <td>4</td>
     <td><input name="unidade4" type="text" id="unidade4" size="8" /></td>
     <td><input type="text" name="quantidade4" id="quantidade4" /></td>
     <td><input type="text" name="espec4" id="espec4" /></td>
     <td><input type="text" name="mod4" id="mod4" /></td>
     <td><input type="text" name="fab4" id="fab4" /></td>
     <td><div align="center">
       <input type="checkbox" name="it4" id="it4" />
     </div></td>
   </tr>
   <tr>
     <td>5</td>
     <td><input name="unidade5" type="text" id="unidade5" size="8" /></td>
     <td><input type="text" name="quantidade5" id="quantidade5" /></td>
     <td><input type="text" name="espec5" id="espec5" /></td>
     <td><input type="text" name="mod5" id="mod5" /></td>
     <td><input type="text" name="fab5" id="fab5" /></td>
     <td><div align="center">
       <input type="checkbox" name="it5" id="it5" />
     </div></td>
   </tr>
   <tr>
     <td>6</td>
     <td><input name="unidade6" type="text" id="unidade6" size="8" /></td>
     <td><input type="text" name="quantidade6" id="quantidade6" /></td>
     <td><input type="text" name="espec6" id="espec6" /></td>
     <td><input type="text" name="mod6" id="mod6" /></td>
     <td><input type="text" name="fab6" id="fab6" /></td>
     <td><div align="center">
       <input type="checkbox" name="it6" id="it6" />
     </div></td>
   </tr>
   <tr>
     <td>7</td>
     <td><input name="unidade7" type="text" id="unidade7" size="8" /></td>
     <td><input type="text" name="quantidade7" id="quantidade7" /></td>
     <td><input type="text" name="espec7" id="espec7" /></td>
     <td><input type="text" name="mod7" id="mod7" /></td>
     <td><input type="text" name="fab7" id="fab7" /></td>
     <td><div align="center">
       <input type="checkbox" name="it7" id="it7" />
     </div></td>
   </tr>
   <tr>
     <td>8</td>
     <td><input name="unidade8" type="text" id="unidade8" size="8" /></td>
     <td><input type="text" name="quantidade8" id="quantidade8" /></td>
     <td><input type="text" name="espec8" id="espec8" /></td>
     <td><input type="text" name="mod8" id="mod8" /></td>
     <td><input type="text" name="fab8" id="fab8" /></td>
     <td><div align="center">
       <input type="checkbox" name="it8" id="it8" />
     </div></td>
   </tr>
   <tr>
     <td>9</td>
     <td><input name="unidade9" type="text" id="unidade9" size="8" /></td>
     <td><input type="text" name="quantidade9" id="quantidade9" /></td>
     <td><input type="text" name="espec9" id="espec9" /></td>
     <td><input type="text" name="mod9" id="mod9" /></td>
     <td><input type="text" name="fab9" id="fab9" /></td>
     <td><div align="center">
       <input type="checkbox" name="it9" id="it9" />
     </div></td>
   </tr>
   <tr>
     <td>10</td>
     <td><input name="unidade10" type="text" id="unidade10" size="8" /></td>
     <td><input type="text" name="quantidade10" id="quantidade10" /></td>
     <td><input type="text" name="espec10" id="espec10" /></td>
     <td><input type="text" name="mod10" id="mod10" /></td>
     <td><input type="text" name="fab10" id="fab10" /></td>
     <td><div align="center">
       <input type="checkbox" name="it10" id="it10" />
     </div></td>
   </tr>
 </table>
 <p>Justificativa<br />
   <label for="justificativa"></label>
   <textarea name="justificativa" id="justificativa" cols="60" rows="5"></textarea>
 </p>
<p>
 <input type="submit" name="submit" id="submit" value="Enviar" />
 <input type="reset" name="Reset" id="button" value="Limpar" />
</p>
 <p> </p>
</form>
<p> </p>
<script type="text/javascript">
var spryselect1 = new Spry.Widget.ValidationSelect("spryselect1", {invalidValue:"--"});
var spryselect2 = new Spry.Widget.ValidationSelect("spryselect2", {invalidValue:"--"});
var spryselect3 = new Spry.Widget.ValidationSelect("spryselect3", {invalidValue:"--"});
var spryselect4 = new Spry.Widget.ValidationSelect("spryselect4", {invalidValue:"--"});
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 
onsubmit="return valida_form() && verifica_itens();"

Compartilhar este post

Link para o post
Compartilhar em outros sites

Physyx    0

Physyx
Postado 

onsubmit="return valida_form() && verifica_itens();"

Acho que informei uma coisa errada...não existe a função valida_form() só a função verifica_itens().

 

O problema é que quando uso o spry validation e coloco no onsubmit a função verifica_itens(), o spry validation deixa de ocorrer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Physyx    0

Physyx
Postado

coloca assim:

 

function verifica_itens()
{
var form1 = document.form1;

 

E segue o código!

 

Obrigado pelo feedback Ted mas o que você sugeriu somente encurta o nome document.form1 para form1 e isso não está me gerando problema mesmo por que já utilizo somente fom1.

 

O meu problema está em usar a validação com spry validation e a validação do script acima.

 

Obrigado.

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