jQuery Validate插件未按预期工作

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

额外，以防有助于

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

返回true，即使在我用空字段单击它之后也是如此。

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

第二版：一开始我用的是：

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

在我把它们改成编辑过的效果很好之后。

第三版：当我注意到这是一个订单问题时，我对我项目的进口进行了一些研究。Jquery库是第一个，就在引导程序库之前。让他们重新回到旧图书馆工作。如果没有你的帮助，我是不会做到这一点的，再次感谢！

Answer 1

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

此外，单击按钮时不需要做任何事情，因为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>