Why are not the fields validated? JQuery Validation

Navigation
1

I am using jQUERY Validation in one of my entry forms, when going from one field to another, the length of the fields is validated. characters correctly, however when you press the button, the form is not validated, even if the fields are blank. According to the documentation, the following code must be used, but this does not work. Curiously, if I remove the id="btn_enter" to the button, if you validate the fields of the form. I'm using AJAX to send data. 

$("#myform").validate({
  submitHandler: function(form) {
    $(form).ajaxSubmit();
  }
});

Form 

<div class="modal fade" id="modal_nuevo" name="modal_nuevo"  role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-md" role="document">
      <div class="modal-content">
        <div class="modal-header bg-blue">
          <h5 class="modal-title text-info" id="myModalLabel">Agregar Tipo de Profesional</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body m-3">
         <p>Por favor ingrese la información solicitada en este cuadro para crear un nuevo tipo de profesional.</p>
          <form id="agregar_profesional" name="agregar_profesional">
              <div class="form-group">
                  <label class="control-label">Código</label>
                  <input  type="text"  class="form-control" id="id" name="id" required>
              </div>
              <div class="form-group">
                  <label class=" control-label">Descripción</label>
                  <input type="text"  class="form-control" id="tipo" name="tipo" required>
              </div>
      </div>
    <div class="modal-footer">
          <button type="button" class="btn btn-danger" id="mbtnCerrarModal" data-dismiss="modal">Cancelar</button>
          <input class="btn btn-info ml-3" type="submit" value="Guardar"  id="btn_ingresar">
    </div>
   </form>
  </div>
 </div>
</div>

Javascript 

jQuery(document).ready(function() {
  $("#agregar_profesional").validate({

    rules: {
    id: { required: true, minlength: 2},
    tipo: { required: true, minlength: 2}
    },
    submitHandler: function(form) {
    $(form).ajaxSubmit();
  }

  });

$("#btn_ingresar").click(function(e){
     $("#agregar_profesional").validate();
    e.preventDefault();
    var _form = $("#agregar_profesional").serialize();
    console.log("form:\n", _form);
    $.ajax({

    url: "<?=base_url();?>profesionales_tipos/agregar/", type: 'post', data: _form,
    success: function(response) {
         console.log("response modal new :\n", response);
           $("#modal_nuevo").modal('hide');
           $("#modal_confirmar").modal('show');
           $('#tblProfesionales').DataTable().ajax.reload();
           $("#id").val("");
           $("#tipo").val("");


       }
    });
});
});
    
asked by CristianOx21 05.01.2018 в 14:29
source

2 answers

1

First in the form, remove the type="submit" of the button that has the id="btn_ingresar"

Then in the Javascript code something like this should work 

$(document).ready(function() { 

  var validar_formulario = $("#agregar_profesional").validate({

    rules: {
    id: { required: true, minlength: 2},
    tipo: { required: true, minlength: 2}
    }

  });

$("#btn_ingresar").click(function(e){

    if (validar_formulario.form()) //asi se comprueba si el form esta validado o no
    {       
        var _form = $("#agregar_profesional").serialize();
        console.log("form:\n", _form);
        $.ajax({

        url: "<?=base_url();?>profesionales_tipos/agregar/", type: 'post', data: _form,
        success: function(response) {
             console.log("response modal new :\n", response);
               $("#modal_nuevo").modal('hide');
               $("#modal_confirmar").modal('show');
               $('#tblProfesionales').DataTable().ajax.reload();
               $("#id").val("");
               $("#tipo").val("");


           }
        });
    }
    else
    {
        //ingresa todo lo que quieras aqui con relacion a que el form no se ha validado de manera correcta :)
    }
});
});

If you notice, I do a verification of the form and this can be found in the documentation of the link that you left at the beginning:)

link

Edit: I'm not sure about this but when I apply the code again $("#agregar_profesional").validate(); luego del $("#btn_ingresar").click I would restart the filters

    
answered by 05.01.2018 / 14:48
source
0

The id of your form is " agregar_profesional ", not " myform ". And it seems you have label errors.

    
answered by 05.01.2018 в 14:39
How do I insert an excel in a sql server table without inserting repeated data in the table? I do not see the game time in modal window