Jquery Validação de Formulario.

d3ividi · Julho 18, 2012

Ola pessoal, sou novo no forum e também como programador, vou tentar descrever meu problema, espero que entendam e possasm me ajudar.

Seguinte estou construindo um sistema utilizando html e javascript, basicamente esse sistema contem formularios para cadastro de informações, a estrutura é a seguinte

tenho um index.html que contem varios botões que quando clicados chamam uma função ajax que carrega uma segunda página "um formulario" no corpo dessa index, até ai tudo bem, cada botão que clico um formulario diferente é carregado no corpo do meu index, funciona como se fosse um frameset do html4, o meu problema é que estou tentando fazer validação desses formulário com jquery, mas não estou conseguindo, ocorre que chamo todos os scripts no <head> do meu index, mas quado chamo funções jquery nos formularios elas não funcionam, só funcionam as funções que chamo diretamente na index, também tentei chamar os scripts direto no <head> dos formularios mas não funcionou, somente funcionou quando eu abri as paginas de formularios separadamente, ou seja sem chamalas no index.

Não sei se alguém intendeu o meu problema espero que sim segue os meus códigos:

index.html

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<title>SAP Sistema Para Automação de Pedidos</title>
<meta charset="UTF-8">
<link id="estilo1" type="text/css" rel="stylesheet" href="estilos/estilo_azul.css">
<link id="estilo2" type="text/css" rel="stylesheet" href="estilos/estilo2_azul.css">
&lt;script language="JavaScript" type="text/javascript" src="js/ajaxhtml.js"></script>
&lt;script language="javaScript" type="text/javascript" src="js/jquery.js"></script>
&lt;script language="javaScript" type="text/javascript" src="js/validate.js"></script>

&lt;script>
    jQuery(document).ready(function() {
      $('#tema_azul').click(function(event) {
            event.preventDefault();
            $('#estilo1').attr('href', 'estilos/estilo_azul.css');
            $('#estilo2').attr('href', 'estilos/estilo2_azul.css');
        });
         $('#tema_verde').click(function(event) {
            event.preventDefault();
            $('#estilo1').attr('href', 'estilos/estilo_verde.css');
            $('#estilo2').attr('href', 'estilos/estilo2_verde.css');
        });

        $('#tema_cinza').click(function(event) {
            event.preventDefault();
            $('#estilo1').attr('href', 'estilos/estilo_cinza.css');
            $('#estilo2').attr('href', 'estilos/estilo2_cinza.css');
        });

        
    });

</script>
</head>
<body onload="requisitar('Paginas/inicio.html'); carregaTema();">
    <table class="cabecalho">
        <tr>
            <td>    
                    <div class="logo"><img src="media/fundo.jpg" align="left"></div>
                    <div class="nome">                    
                        <h2>FRIGORÍFICO DEMARCHI</h2>
                        <h2>SISTEMA PARA AUTOMAÇÃO DE PEDIDOS</h2>
                    </div>
                    <div class="login">
                    <form name="login" action="validaLogin.php" method="POST" onSubmit="return avisa()">
                    <table>
                        <tr>
                            <th>Login:</th>
                            <td><input  type="text" name="login" required></td>
                        </tr>
                        <tr>
                            <th>Senha:</th>
                            <td><input  type="password" name="senha" required></td>
                        </tr>
                        <tr>
                            <th></th>
                            <td><input type="submit" name="enviar" value="entrar" ></td>
                        </tr>
                    </table>
                    </form>
                    </div>
            </td>
        </tr>
        <tr>
            <td>
                <hr width="100%" size="2" align="center" color="#FF0000" >
                <nav class="menu" >
                    <ul class="menu">
                        <li class="list"><a class="category" href="Paginas/inicio.html" onclick="requisitar(this.href); return false;">Inicio</a></li>
                    </ul>
                    <ul class="menu">
                        <li class="list">
                            <a class="category" >Clientes</a>
                            <ul class="submenu">    
                                <li><a href="Paginas/clientes.html" onclick="requisitar(this.href); return false;">Cadastrar</a></li>
                                <li><a href="#about1">Consultar</a></li>
                                <li><a class="endlist" href="#news3">Excluir</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="menu">
                        <li class="list">
                            <a class="category" href="#about1">Produtos</a>
                            <ul class="submenu">
                                <li><a href="Paginas/produtos.html" onclick="requisitar(this.href); return false;">Cadastrar</a></li>
                                <li><a href="#about1">Consultar</a></li>
                                <li><a class="endlist" href="#news3">Excluir</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="menu">
                        <li class="list">
                            <a class="category" href="#about1">Pedidos</a>
                            <ul class="submenu">
                                <li><a href="Paginas/pedidos.html" onclick="requisitar(this.href); return false;">Cadastrar</a></li>
                                <li><a href="#about1">Alterar</a></li>
                                <li><a class="endlist" href="#news3">Excluir</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="menu">
                        <li class="list"><a class="category" href="Paginas/relatorios.html" onclick="requisitar(this.href); return false;">Relatórios</a></li>
                    </ul>
                    <ul class="menu">
                        <li class="list">
                            <a class="category" href="#about1">Temas</a>
                            <ul class="submenu">
                                <li><a id="tema_azul" href="#azul" onclick="gravaArquivo('azul');">Azul</a></li>
                                <li><a id="tema_verde" href="#Verde" onclick="gravaArquivo('verde');">Verde</a></li>
                                <li><a id="tema_cinza" class="endlist" href="#cinza" onclick="gravaArquivo('cinza');">Cinza</a></li>
                            </ul>
                        </li>
                    </ul>                    
                </nav>
            </td>
        </tr>
    </table>
    <br>
  
    <table class="conteudo">
        <tr><td><hr width="100%" size="2" align="center" color="#FF0000"></td></tr>
        <tr><td id="insere_aqui" ></td></tr>
        <tr><td><hr width="100%" size="2" align="center" color="#FF0000"></td></tr>
    </table>
    <br>
    <table class="rodape">
        <tr>
                <td width="70%" align="center">
                    <footer><!--Tag html 5 -->
                    SISTEMA PARA AUTOMAÇÃO DE ENVIO DE PEDIDOS<br>
                    Criado Por: Deividi Anderson Scalzavara.
                    </footer>
                </td>
                <td>
                    <audio controls="true"><!--Tga de audio HTML5-->
                        <source src="/SAP/media/musica.mp3">    
                        <source src="/SAP/media/musica.ogg">    
                    </audio>
                </td>
        </tr>
        <tr>
                <td colspan="2">
                    <hr width="100%" size="2" align="center" color="#FF0000">
                </td>
        </tr>
    </table>
</body>
</html>

formulario.html

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
    <title>Cadastro de Produtos</title>
<meta charset="UTF-8">
<style>
label.error {
  color: red;
  font-weight: 10px;
  padding: 3px;
  margin: 6px 0;
  width: 120px;
  text-align: center;
}

</style>
&lt;script>
    jQuery(document).ready(function(){
        alert("teste");
        $('#formProduto').validate({
            rules:{
                descricao:{
                    required: true,
                    minlength: 2
                },
                unidade: {
                    required: true,
                    minlength: 2
                }

            },
            messages:{
                descricao:{
                    required: "O campo nome é obrigatorio.",
                    minlength: "O campo nome deve conter no mínimo 3 caracteres."
                },
                unidade: {
                    required: "O campo email é obrigatorio.",
                }
            }
            
         });
    });

</script>
</head>
<body>
<form method="POST" id="formProduto" action="" onSubmit="return avisa()" >
<fieldset>
<legend>Cadastro de Produtos</legend>    
<table class="formulario">
            <tr>
                <th class="formulario">Descrição :</th>
                <td><input type="text" name="descricao" ></td>
            </tr>
            <tr>
                <th class="formulario">Código :</th>
                <td><input type="text" name="codigo" class="porque" ></td>
            </tr>
            <tr>
                <th class="formulario">Unidade :</th>
                <td><input type="text" name="unidade" class="porque" ></td>
            </tr>
            <tr>
                <th class="formulario"> Grupo :</th>
                <td><select name="opcoes" size="1">
                        <option>Carne com Osso Resfriada</option>
                        <option>Carne Sem Osso Resfriada</option>
                        <option>Carne Com Osso Congelada</option>
                        <option>Carne Sem Osso Congelada</option>
                        <option>Miúdos Resfriados</option>
                        <option>Miúdos Congelados</option>
                        </select></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" name="enviar" value="enviar" class="porque"   ></td>
            </tr>
</table>
</fieldset>
</body>
</html>

Entrar

Jquery Validação de Formulario.

Pergunta

d3ividi

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades