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”或所需的属性时，我收到错误消息“此字段为必填字段。 ”即使我删除了整个脚本也显示出来。我想覆盖此默认值。换句话说，我希望能够显示我的自定义消息（“ El campo DNI no puede estarvacío”或“ El campoconverseñano puede estarvací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：当我发现proyect的订单问题时，我对其进行了一些研究。 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>

jQuery Validate插件无法正常工作

1 个答案: