时间戳

首页 > 解决方案 > jQuery Validate 插件未按预期工作

jquery - jQuery Validate 插件未按预期工作

问题描述

我正在尝试为登录页面设置验证，但无法手动设置消息。测试如下：

$("#botonEnviar").click(function() {
  //alert("Button push works");
  $("#loginform").validate({
    rules: {
      _username: {
        required: true
      },
      _password: {
        required: true
      }
    },
    messages: {
      _username: {
        required: "El campo DNI no puede estar vacío"
      },
      _password: {
        required: "El campo contraseña no puede estar vacío"
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<form id="loginform" class="login-form" action="{{ path('login') }}" method="post">
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-user"></i>
      <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="DNI" name="_username" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-lock"></i>
      <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="contraseña" name="_password" />
    </div>
  </div>
  <div class="form-actions">
    <button id="botonEnviar" type="submit" class="btn green pull-right">Acceder </button>
  </div>
</form>

激活（单击）按钮时，我根本没有收到任何错误（只有当我取消注释时才会发出警报），但是当我设置 class="required" 或所需的属性时，我收到错误“此字段是必需的”。即使在我删除整个脚本后也会显示。我想覆盖这个默认值。换句话说，我希望能够显示我的自定义消息（“El campo DNI no puede estar vacío”或“El campo contraseña no puede estar vacío”）。我已经阅读了文档和类似的问题（我知道很多），但是我提供的解决方案没有得到任何结果，所以我希望你能以某种方式帮助我。谢谢

额外的，以防有帮助

alert($("#loginform").validate().form());

即使在我用空字段单击它后也返回 true。

编辑：表单独立于 javascript 验证本身可以正常工作。它在数据正确时记录并在登录不起作用时刷新页面。所以没问题

EDIT2：起初我使用的是：

<script src="{{ asset('assets/global/plugins/jquery.min.js') }}" type="text/javascript"></script>
  <script src="{{ asset('assets/global/plugins/jquery-validation/js/jquery.validate.min.js') }}" type="text/javascript"></script>

在我将那些更改为编辑后的工作完美之后。

EDIT3：当我注意到这是一个订单问题时，我对我的项目的进口进行了一些研究。Jquery 库是第一个，就在引导库之前。让他们再次与旧图书馆合作。如果没有你的帮助，我不会达到这个目标，再次感谢！

标签： jqueryjquery-validate

解决方案

您的代码在片段中似乎没问题，问题可能出在开发环境中，另一个错误可能是阻止代码运行？

另外点击按钮时你也不需要做任何事情，因为已经有一个type="submit"按钮触发的“提交”事件，插件会自动检查你的表单是否有效。

如果你需要对按钮做一些事情，你需要删除类型提交，点击时检查表单是否有效，如下所示：

$(function() {
  $("#loginform").validate({
    rules: {
      _username: {
        required: true
      },
      _password: {
        required: true
      }
    },
    messages: {
      _username: {
        required: "El campo DNI no puede estar vacío"
      },
      _password: {
        required: "El campo contraseña no puede estar vacío"
      }
    }
  });
  
  $("#botonEnviar").click(function () {
   if( $("#loginform").valid() ) {
    alert('seems ok!!');
   }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.min.js"></script>
<form id="loginform" class="login-form" action="{{ path('login') }}" method="post">
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-user"></i>
      <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="DNI" name="_username" />
    </div>
  </div>
  <div class="form-group">
    <div class="input-icon">
      <i class="fa fa-lock"></i>
      <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="contraseña" name="_password" />
    </div>
  </div>
  <div class="form-actions">
    <button id="botonEnviar" type="button" class="btn green pull-right">Acceder </button>
  </div>
</form>

推荐阅读