jQuery Validate plugin doesn't work in CodeIgniter

Question

I'm trying to use the jQuery Validate plugin in a view of a CodeIgniter project using exactly like a lot of examples Internet, but doesn't work at all! I used a lot of sugerences that I found here in StackOverflow and other sites, but doesn't work. Here is my code:

<script src="<?php echo base_url(); ?>js/jquery-validation-1.16.0/dist/jquery.validate.js"></script>
<body>
<section class="content">
      <div class="row">
        <!-- left column -->
        <div class="col-md-6">

          <!-- general form elements -->
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Ingresar nueva empresa</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <form  id="formIngEmpresa">

                <!-- RESPUESTA DE FORMULARIO -->

                <!-- FIN RESPUESTA DE FORMULARIO -->

              <div class="box-body">
                <div class="form-group">
                  <label for="usuario_login">Nombre o Razón Social de la empresa</label>
                  <input type="input" class="form-control" id="nm_rs_empresa" placeholder="Ingrese login">
                </div>
                <div class="form-group">
                  <label for="usuario_password">Rut empresa</label>
                  <input type="input" class="form-control" id="nr_rut_empresa" placeholder="rut">
                </div>
                <div class="form-group">
                  <label for="usuario_password2">Descripcion empresa</label>
                  <input type="text" class="form-control" id="nm_desc_empresa" placeholder="Password">
                </div>
                <div class="form-group">
                  <label for="usuario_nm_usuario">Rubro de la empresa</label>
                  <input type="input" class="form-control" id="nm_rubro" placeholder="Ingrese nombres">
                </div>

                </div>
              </div>
              <!-- /.box-body -->

              <div class="box-footer">
                <button type="submit" class="btn btn-primary">Ingresar</button>
                <button type="reset" class="btn btn-default">Cancelar</button>

              </div>
            </form>
          </div>
          <!-- /.box -->

      </div>
      <!-- /.row -->
    </section>
    </body>
<script>



$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  alert($("#formIngEmpresa").validate().form());
  $("#formIngEmpresa").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      nm_rs_empresa: "required",
      nr_rut_empres: "required",
      nm_desc_empresa: "required",
      nm_rubro: "required"

    },
    // Specify validation error messages
    messages: {
      nm_rs_empresa: "Porfavor introducir nombre empresa",
      nr_rut_empres: "Por favor introducir rut",
      nm_desc_empresa: "Por favor introducir una Descripcion",
      nm_rubro: "Elija el rubro de la empreesa",

    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
   $("#submit").click(function(){
            $("#formIngEmpresa").submit();
            return false;
    });
});
    </script>

Answer 1

First update the ID of the form
Instead if this

<form  id="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js">

put

<form  id="formIngEmpresa">

This is your first mistake, the ID of form must match with the JQuery methods $("#formIngEmpres").validate() where formIngEmpres is the ID of the form.

Answer 2

jQuery Validate plugin doesn't work in CodeIgniter

Right, it doesn't. jQuery is JavaScript and it only works in the browser, while CodeIgniter only works on the server. In other words, your framework does not matter to JavaScript as long as you send the proper HTML markup to the browser.

Here's why you're having difficulties...

You must have a name attribute on every input considered for validation and these names must exactly match the names you used when you declared your rules. Even your code comments say the same thing!

 rules: { // The key name on the left side is the name attribute <-- READ HERE!! // of an input field. Validation rules are defined // on the right side nm_rs_empresa: "required", // <- 'nm_rs_empresa' must match the 'name' attribute ....

The click handler could be bypassing the plugin. Since jQuery Validate automatically captures the click event of the submit button and fully takes care of the submission, you absolutely would not need any additional event handlers. Remove this entire click handler... it's not needed.
```
 $("#submit").click(function() { // REMOVE THIS $("#formIngEmpresa").submit(); // REMOVE THIS return false; // REMOVE THIS }); // REMOVE THIS 
```

Working DEMO: jsfiddle.net/wtdhvtc7/

jQuery Validate plugin doesn't work in CodeIgniter

Question

2 answers

solution1
0 2017-03-21 19:39:56

solution2
0 ACCPTED 2017-03-21 21:15:55

jQuery Validate plugin doesn't work in CodeIgniter

Question

2 answers

solution1 0 2017-03-21 19:39:56

solution2 0 ACCPTED 2017-03-21 21:15:55

solution1
0 2017-03-21 19:39:56

solution2
0 ACCPTED 2017-03-21 21:15:55