Exemplo de utilização da biblioteca de validação
postado por: Gregui Shigunov | Tags framework, javascript, validação de formulário |
Aqui está um exemplo de formulário validado pela ferramenta:
Qualquer dúvida: gregui@gmail.com
<html>
<head>
<meta name="copyright" content="Gregui Shigunov" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/gregui.js"></script>
<link rel="stylesheet" type="text/css" href="css/gregui.css" />
<link rel="stylesheet" type="text/css" href="css/estilo_da_pagina.css" />
</head>
<body>
<form action="arquivo.xxx" method="POST" name="FORM_CADASTRO" id="FORM_CADASTRO">
<p class="campo_form">
<label for="NOME">Nome</label><br/>
<input name="NOME" id="NOME" type="text" value="" size="60" maxlength="30" minlength="4"
tipo="texto" obrig="1" />
<span id="NOME_desc" class="msg_desc" >Nome completo do usuário (* obrigatório)</span>
<span id="NOME_obrig" class="msg_obrig" >Tamanho deve contar 3 caracteres</span>
<span id="NOME_inv" class="msg_inv">
Quantidade de caráctere ultrapassou o limite esperado</span>
</p>
<p class="campo_form">
<label for="IDADE">Idade</label><br/>
<input name="IDADE" id="IDADE" type="text" value="" size="10" minimo="18" maximo="99"
tipo="inteiro" obrig="1" />
<span id="IDADE_desc" class="msg_desc" >informe a idade</span>
<span id="IDADE_obrig" class="msg_obrig" >obrigatório (válidos entre 18 e 99)</span>
<span id="IDADE_inv" class="msg_inv">Formato incorreto (inteiro)</span>
</p>
<p class="campo_form">
<label for="EMAIL">E-mail</label><br/>
<input name="EMAIL" id="EMAIL" type="text" value="" size="60" maxlength="70" minlength="0"
tipo="email" obrig="1" />
<span id="EMAIL_desc" class="msg_desc" >seu e-mail para contato</span>
<span id="EMAIL_obrig" class="msg_obrig" >O campo é obrigatório</span>
<span id="EMAIL_inv" class="msg_inv">Formato de campo inválido</span>
</p>
<p class="campo_form">
<label>Hora</label><br/>
<input name="HORA" id="HORA" type="text" value="" size="8" maxlength="8" tipo="hora"
formato="HH:MM:SS" obrig="1"/>
<span id="HORA_desc" class="msg_desc" >* Horas (HH:MM:SS)</span>
<span id="HORA_obrig" class="msg_obrig" >O campo é obrigatório</span>
<span id="HORA_inv" class="msg_inv">Formato de campo inválido</span>
</p>
<p class="campo_form">
<label>Data</label><br/>
<input name="DATA" id="DATA" type="text" value="" size="10" maxlength="10" tipo="data"
formato="DD/MM/AAAA" obrig="1"/>
<span id="DATA_desc" class="msg_desc" >* formato (DD/MM/AAAA)</span>
<span id="DATA_obrig" class="msg_obrig" >O campo é obrigatório</span>
<span id="DATA_inv" class="msg_inv">Formato de campo inválido</span>
</p>
<p class="campo_form">
<label>TEXTO</label><br/>
<span id="TEXTO_desc" class="msg_desc" >* Aqui a descrição do campo (formato)</span>
<script type="text/javascript" src="./libs/tiny_mce/tiny_mce.js"></script>
<textarea id="TEXTO" name="TEXTO" rows="15" cols="80"
style="width: 720px;" class="editorHTML"></textarea>
</p>
<p class="campo_form">
<label>CIDADE</label><br/>
<span id="CIDADE_desc" class="msg_desc" >* Selecione a(s) cidade(s)</span>
<span id="CIDADE_inv" class="msg_inv" >Selecione entre 3 e 4 opções</span>
<br/>
<select name="CIDADE" id="CIDADE" multiple="multiple" obrig="1" min="3" max="4"
style="width:200px;height:100px;" type="select">
<option value="1">Florianópolis</option>
<option value="2">Curitiba</option>
<option value="3">Florianópolis</option>
<option value="4">Rio de Janeiro</option>
<option value="5">São Paulo</option>
</select>
</p>
<p class="campo_form">
<label>ESTADO</label><br/>
<span id="ESTADO_desc" class="msg_desc" >* Selecione a cidade</span>
<span id="ESTADO_inv" class="msg_inv" >Selecione uma opção</span>
<br/>
<select name="ESTADO[]" id="ESTADO" obrig="1" type="select">
<option value="">Selecione</option>
<option value="2">Paraná</option>
<option value="1">Pernambuco</option>
<option value="2">Piauí</option>
<option value="3">Rio de Janeiro</option>
<option value="4">Rio Grande do Norte</option>
<option value="5">Rio Grande do Sul</option>
<option value="6">Rondônia</option>
</select>
</p>
<p> </p>
<p>
<input type="button" value="enviar"
onclick="enviar_formulario('FORM_CADASTRO');" />
<input type="button" value="validar"
onclick="valida_form('FORM_CADASTRO') == true ? alert('OK') : alert('inválido') ;" />
</p>
</form>
</body>
</html>
Qualquer dúvida: gregui@gmail.com
Comments (0)
Postar um comentário