Document.form.Submit() does not validate

Asked

Viewed 2,889 times

0

Galley made a function that when the user clicks on a button, it calls the action document.form.submit(), till then all right, it sends the form normally. But on <form> put the onsubmit="return validarFormulario();" but it is not calling this function and does not generate error in the console, just does not perform the function. How do I validate the form using this method?

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>

functions js.

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

}
javascript html5

  • You have to put in more code, otherwise you can’t tell what the problem might be...

  • Post the function validateFormulario.

  • @Sergio added the codes.

  • @Laerte added the codes.

  • A question you put the script funcoes.js at the head or end of the body?

  • @Laerte tried in both cases, neither of them worked. I gave a console.log("teste"); inside the file, and they are working normal, it seems that the function onsubmit of form not working.

  • You want: when the person clicks on the "Save" link to give Submit in the form but first validating if the function return is true?

  • @Laerte.

  • The function is called, but the if always gives false because the title field is mandatory and never empty. What’s wrong? How do you perform the function Submit? -> https://jsfiddle.net/9h9pxeay/

  • @Sergio here I call the Submit function <a onclick="document.formulario.submit();">&#xA; <span class="icone-menu-pagina icone-salvar"></span>&#xA; <span>Salvar</span>&#xA; </a>

  • Won’t you have any buttons to send the form? Just the link right? You can put the Submit() in the validation function?

  • @Laerte yes, only on the link. How I put Submit in validation?

  • See if my answer answers what you expect.

Show 8 more comments

1 answer

1


I removed the attribute "required" for demonstration purposes, passed the call of the validation pro link "Save" since the form will not have any buttons of Submit. If your function does not enter any of the validations and return false the default return is an Alert and then it sends your form, the attribute onsubmit in your form does not make sense in this case where the call is made 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>

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.