0

Galera fiz uma função que que quando o usuário clica sobre um botão, ele chama a ação document.form.submit(), ate ai tudo bem, ele envia o formulário normalmente. Mas no <form> coloquei o onsubmit="return validarFormulario();" mas ele não está chamando esta função e nao gera erro no console, apenas nao realiza a função. Como faço para validar o formulário usando este método?

index.html

<div class="cabecalho-pagina">
        <div class="titulo">
            <div class="icon-pagina">
                <img src="<?=_URL_;?>/admin/img/icon-48-article-add.png" alt="Artigo">
            </div>
            <span>Notícia: [Novo]</span>
        </div>

        <div class="menus-pagina">
            <a onclick="document.formulario.submit();">
                <span class="icone-menu-pagina icone-salvar"></span>
                <span>Salvar</span>
            </a>
            <a href="">
                <span class="icone-menu-pagina icone-cancelar"></span>
                <span>Cancelar</span>
            </a>
        </div>
    </div>

    <div class="conteudo-pagina">
        <form action="" method="post" id="formulario" enctype="multipart/form-data" class="formulario" name="formulario" onsubmit="return validarFormulario();">
            <input type="text" name="titulo" id="titulo" class="titulo" placeholder="Título da notícia" required/>
            <input type="text" name="data" id="data" class="data" value="<?=date("d-m-Y h:i:s");?>" required/>

            <label>
                Publicado:
                <select class="publicado" name="publicado" id="">
                    <option value="1" required>Sim</option>
                    <option value="1">Não</option>
                </select>
            </label>

            <textarea class="conteudo" id="conteudo" name="conteudo" placeholder="Conteudo da notícia" required></textarea>

            <input type="file" name="imagem" class="imagem" id="imagem" accept=".jpg,.png,.gif">

        </form>

    </div>

funcoes.js

function validarFormulario(){
    if(document.getElementById("titulo").value==""){
        alert("Preencha o campo de titulo");
        return false;
    }

}
13
  • Tens de colocar mais código, senõ não dá para saber o que pode ser o problema...
    – Sergio
    15/04/2015 às 15:13
  • Poste a função validarFormulario.
    – Laerte
    15/04/2015 às 15:15
  • @Sergio adicionei os códigos. 15/04/2015 às 15:16
  • @Laerte adicionei os códigos. 15/04/2015 às 15:16
  • Uma dúvida você colocou o script funcoes.js no head ou no final do body?
    – Laerte
    15/04/2015 às 15:19

1 Resposta 1

1

Eu removi o atributo "required" para fins de demonstração, passei a chamada da validação pro link "Salvar" já que o formulário não vai ter nenhum botão de submit. Se sua função não entrar em nenhuma das validações e retornar falso o retorno padrão é um alert e depois ele envia seu formulário, o atributo onsubmit no seu formulário não faz sentido nesse caso onde a chamada é feita via Javascript

function validarFormulario() {
  // validações
  if (document.getElementById("titulo").value == "") {
    alert("Preencha o campo de titulo");
    return false;
  }
  alert("Enviou");
  document.formulario.submit();
}
<div class="menus-pagina">
  <a href="#" onclick="validarFormulario()">
    <span class="icone-menu-pagina icone-salvar"></span>
    <span>Salvar</span>
  </a>
  <a href="#">
    <span class="icone-menu-pagina icone-cancelar"></span>
    <span>Cancelar</span>
  </a>
</div>
</div>

<div class="conteudo-pagina">
  <form action="" method="post" id="formulario" enctype="multipart/form-data" class="formulario" name="formulario">
    <input type="text" name="titulo" id="titulo" class="titulo" placeholder="Título da notícia" />
    <br>
    <input type="text" name="data" id="data" class="data" placeholder="Data da Postagem" />
    <br>
    <label>
      Publicado:
      <select class="publicado" name="publicado" id="">
        <option value="1">Sim</option>
        <option value="1">Não</option>
      </select>
    </label>
    <br>
    <textarea class="conteudo" id="conteudo" name="conteudo" placeholder="Conteudo da notícia"></textarea>
    <br>
    <input type="file" name="imagem" class="imagem" id="imagem" accept=".jpg,.png,.gif">
  </form>
</div>

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .