0

Tenho um Form, que o botão que faz o submit dele, fica fora da tag <form>. então eu faço o envio dele via Script. O problema é que ele não ta validando o Form, antes de enviar. eu sempre usei apenas a chamada dos scripts, que o form ja Validava. mas isso com o submit dentro da tag form.

O Script que faz o Submit é esse:

<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>

   <script type="text/javascript">
        function Enviar() {
        
            document.forms["frmCliente"].submit();
    
        }
    </script>
<form id="fmrCliente" action="/Gerencial/ClienteGerencial/Create">
<label>Razão Social</label>
<input class="form-control-sm text-box single-line" data-val="true" data-val-maxlength="máximo de Razão Social caracteres" data-val-maxlength-max="200" data-val-required="O campo Razão Social é obrigatório." id="Cliente_RazaoSocial" name="Cliente.RazaoSocial"  value="">
</form>
 <button class="btn botoes" type="submit" onclick="Enviar();" id="submeter" name="submeter">
  Gravar
</button>

Alguém sabe como fazer a validação dele, antes de enviar?? Não coloquei ai, mas estou fazendo a chamada do Jquery.js

2 Respostas 2

1

Primeiro seu campo não é inválido, então mesmo com todo o código iria funcionar.

Precisa tratar o evento do click no botão submit, para isso associei o evento com "on" no document, passando "e" como parâmetro, que é o evento, e isso vai permitir, caso o formulário seja inválido (form.valid()) executar o método preventDefautl(), que vai cancelar o evento de submit.

Veja o exemplo abaixo (adicionei "requered" no campo):

$(document).on('click', function(e) {
    var form = $('#fmrCliente');

    if(!$(form).valid()) {
      e.preventDefault(); //cancela o evento
      return false;
    }
    $(form).submit();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js" integrity="sha256-xLhce0FUawd11QSwrvXSwST0oHhOolNoH9cUXAcsIAg=" crossorigin="anonymous"></script>

<form id="fmrCliente" action="/Gerencial/ClienteGerencial/Create">
  <label>Razão Social</label>
  <input required class="form-control-sm text-box single-line" data-val="true" data-val-maxlength="máximo de Razão Social caracteres" data-val-maxlength-max="200" data-val-required="O campo Razão Social é obrigatório." id="Cliente_RazaoSocial" name="Cliente.RazaoSocial"  value="">
</form>
 <button class="btn botoes" type="submit" " id="submeter" name="submeter">
  Gravar
</button>

2
  • Eu não consegui... mesmo preenchendo todos os campos, o form não faz o submit, eu coloquei o debugger e vi, que o envendo click ta funfando... só que o form sempre da invalid, mesmo com todos os campos preenchidos 8/08/2019 às 13:09
  • se não está enviando é porque tem erros. use esse código para ver o que está com erro: var validacao = $("form").validate(); var erros = validacao.errors(); pode inspecionar o erros ou fazer um alert 8/08/2019 às 14:14
1

A resposta do amigo @Ricardo Pontual esta bem completa.

Mas como você disse que seu problema é a validação antes do envio, estou presumindo que o envio esteja ok e você não quer alterar, sendo assim você pode usar algo como o código abaixo:

function Enviar() {
  //Pega o valor do campo
  const valorCampoRazaoSocial = document.forms.NomeDoForm.NomeDoInput.value;
  //Faz as validações
  validaDados(valorCampoRazaoSocial);
  //Envia 
  document.forms["frmCliente"].submit();
}

Repare tanto o form quanto o input deve tevem ter uma tag "name" e é esse nome que você deve substituir na onde eu coloquei NomeDoForm e NomeDoInput.

Espero ter ajudado.

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 .