Validate Form Jquery

Question

I have a form, that the button that makes his Submit, stays outside the tag <form>. then I send it via Script. The problem is he’s not validating the Form, before sending. I always only used the call of the scripts, which form already validated. but this with Ubmit inside the tag form.

The Submit Script is this:

<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>

Does anyone know how to validate it before sending it? I didn’t put it there, but I’m making the call from Jquery.js

Answer 1

First your field is not invalid, then even with all the code would work.

You need to handle the event of the click on the Submit button, for that I associated the event with "on" in the Document, passing "e" as parameter, which is the event, and this will allow, if the form is invalid (form.valid()) execute the method preventDefautl(), that will cancel the event of Submit.

See the example below (I added "requered" in the field):

$(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>

Answer 2

The reply of the friend @Ricardo Pontual is quite complete.

But as you said your problem is validation before of the shipment, I am assuming that the shipment is ok and you do not want to change, so you can use something like the code below:

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();
}

Note both the form and the input must have a "name" tag and it is this name that you should replace in the one where I put Namedeform and Namepaut.

I hope I’ve helped.