javascript - 使用 parsley.js 每个字段支持多个自定义错误消息

标签 javascript jquery parsley.js

我正在尝试使用 parsley.js 验证一个简单的表单,我是 parsley.js 的初学者。我想在一个使用 window.ParsleyValidator.addValidator() 方法的自定义验证方法中显示多条错误消息。所以我以我的方式尝试过。

我创建的简单 html 表单

<html>
	<head>Custom Validation Parsley
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script src="js/parsley.min.js"></script>
		<script src="js/my-validator-parsley.js"></script>
		
	</head>
	<body>
		<form class="cmxform" id="commentForm" method="get" action="">
		  <fieldset>
		    <legend>Please provide your name, email address (won't be published) and a comment</legend>
		   
		    <p>
		      <label for="cemail">E-Mail with custom method (required)</label>
		      <input id="cemail" name="checkEmail" data-parsley-checkEmail>
		    </p>
		   
		   
		    <p>
		      <input class="submit" type="submit" value="Submit">
		    </p>
		  </fieldset>
		</form>
		<script>
		$("#commentForm").parsley();
		</script>
	</body>
</html>

以及包含自定义验证方法的 javascript 文件

var errorMsg = "";
window.ParsleyValidator.addValidator('checkEmail', function(value) {
    console.log(value);
    if (value == "") {

      errorMsg = "this field must not be empty";

      return false;
    } else {
      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

      if (!regex.test(value)) {

        errorMsg = "this field must be email ***";
        

      }
      return regex.test(value);
      window.ParsleyValidator.addMessage('en', 'checkEmail',
        errorMsg);
    }

  }, 32)
  //.addMessage('en','checkEmail',window.ParsleyValidator.catalog)
;

但这对我不起作用。任何人都可以就此以及如何完成此任务给我建议吗?

最佳答案

在给定的语言环境中,您只能为每个约束分配一条消息。

来自 http://parsleyjs.org/doc/annotated-source/validator.html :

addMessage: function (locale, name, message) {
  if ('undefined' === typeof this.catalog[locale])
    this.catalog[locale] = {};

  this.catalog[locale][name.toLowerCase()] = message;

  return this;
},

因此,如果您需要多条消息,请定义多个验证器。

此外,

  • 如果您希望某个字段为必填字段,则无需检查它是否为空;只需添加 required属性(例如 <input ... required />)

  • Parsley 与通用验证器 ( http://parsleyjs.org/doc/index.html#validators ) 捆绑在一起,“电子邮件”就是其中之一;启用它添加属性 type="email"根据您的输入(例如 <input type="email" required /> )

更新:

来自 http://parsleyjs.org/doc/index.html#psly-ui-for-javascript :

window.ParsleyUI.updateError(parsleyInstance, name, message);
Manually edit an error message.

此外,您可以通过将验证器函数直接分配给 catalog 来设置消息而不是使用 addMessage() (注意validator的名字要全部小写):

window.ParsleyValidator.addValidator('checkEmail', function(value) {

    if (...)
        window.ParsleyValidator.catalog.en.checkemail = 'Some error message AAA';
    else
        window.ParsleyValidator.catalog.en.checkemail = 'Some error message BBB';

    return (...);

}, 32);

关于javascript - 使用 parsley.js 每个字段支持多个自定义错误消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30155021/

相关文章:

javascript - 当我更改选择标签时,为什么不在输入 id ="message"中显示数据?

javascript - jQuery 的 .text() 在内部是如何工作的?

javascript - 我正在尝试将动态脚本添加到页面中,但它在 DOM 中仅显示为 txt

javascript - 使用 JS/JQuery 异步迭代大量对象

jquery - 欧芹 js 与 MVC5

javascript - 抓取 Parsley JS 字段错误并更新 CSS

javascript - 如何在 Chrome 扩展中为 OAuth2 提供重定向 URL?

javascript - 将 Mongoose/Multer 文件上传的工作 Modal/FORM 更改为 MULTIPART/FORM - Modal 保持打开状态

Modal Bootstrap 上的 java 日历

javascript - Parsley.js 验证没有 dom 元素的函数