jQuery 验证插件未按预期工作

Question

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

$("#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" 或所需的属性时，我得到错误 "This field is required." 即使在我删除整个脚本后也会显示。我想覆盖这个默认值。换句话说，我希望能够显示我的自定义消息（"El campo DNI no puede estar vacío"，或 "El campo contraseña no puede estar vacío"）。我已经阅读了文档和类似的问题（我知道有很多），但是我没有得到提供的解决方案的结果，所以我希望你能以某种方式帮助我。谢谢

额外的，以防有帮助

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

returns 即使在我点击空白字段后也是如此。

编辑：表单独立于 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 库是第一个，就在 bootstrap 库之前。转过身来再次与旧图书馆合作。没有你的帮助，我不会走到这一步，再次感谢！

Answer 1

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

另外你点击按钮时不需要做任何事情，因为已经有一个由type="submit"按钮触发的"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>

jQuery 验证插件未按预期工作

jQuery Validate plugin is not working as expected

jquery

jquery-validate