jQuery 验证插件在 CodeIgniter 中不起作用

Question

我正在尝试在 CodeIgniter 项目的视图中使用 jQuery Validate plugin ，就像互联网上的许多示例一样，但根本不起作用！我使用了很多我在 Whosebug 和其他网站上找到的 sugerences，但没有用。这是我的代码：

<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

首先更新表单的ID
相反，如果这个

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

放

<form  id="formIngEmpresa">

这是您的第一个错误，表单的 ID 必须与 JQuery 方法匹配 $("#formIngEmpres").validate() 其中 formIngEmpres 是表单的 ID。

Answer 2

jQuery Validate plugin doesn't work in CodeIgniter

对，不是。 jQuery 是 JavaScript 并且它只适用于浏览器，而 CodeIgniter 只适用于服务器。换句话说，只要您向浏览器发送正确的 HTML 标记，您的框架对 JavaScript 并不重要。

这就是您遇到困难的原因...

您必须在考虑验证的每个输入上都有一个 name 属性，并且这些名称必须与您声明您的名称时使用的名称完全匹配规则。甚至您的代码注释也说同样的话！

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

click 处理程序可能绕过了插件。由于 jQuery Validate 自动捕获 submit 按钮的 click 事件并完全处理提交，您绝对不需要任何额外的事件处理程序。删除整个 click 处理程序...不需要。
```
$("#submit").click(function() {     // REMOVE THIS
    $("#formIngEmpresa").submit();  // REMOVE THIS
    return false;                   // REMOVE THIS
});                                 // REMOVE THIS
```

工作演示：jsfiddle.net/wtdhvtc7/

jQuery 验证插件在 CodeIgniter 中不起作用

jQuery Validate plugin doesn't work in CodeIgniter

javascript

jquery

jquery-validate