如何为data-parsley-required-message生成的提示添加role="alert"属性

嘿，这个需求我之前做项目的时候刚好碰到过！Parsley本身没有直接提供配置项来给自动生成的错误提示加自定义属性，但我们可以通过两种简单的方法实现你的目标：

方法一：监听错误事件动态添加属性 #

如果只想给必填错误提示单独加role="alert"，可以捕获Parsley的字段错误事件，找到对应的提示元素后手动添加属性：

document.addEventListener('DOMContentLoaded', function() {
  // 监听Parsley的字段错误触发事件
  window.Parsley.on('field:error', function(fieldInstance) {
    // 定位到当前字段的必填错误提示li元素
    const requiredError = fieldInstance.$element
      .siblings('.parsley-errors-list')
      .find('li.parsley-required');
    
    // 给匹配到的元素添加role属性
    if (requiredError.length) {
      requiredError.attr('role', 'alert');
    }
  });
});

方法二：全局配置错误模板（更彻底） #

要是希望所有Parsley生成的错误提示都带有role="alert"，可以直接自定义错误模板，把属性提前写在模板里：

document.addEventListener('DOMContentLoaded', function() {
  // 设置Parsley全局默认配置
  window.Parsley.setDefaults({
    // 单个错误提示模板，直接加入role="alert"
    errorTemplate: '<li role="alert"></li>'
  });
});

这样配置后，Parsley会自动给对应的提示li加上parsley-required这类错误类名，最终生成的元素完全符合你的要求：

This value is required.

小提示 #

• 一定要确保代码在Parsley脚本加载完成后执行，放在DOMContentLoaded事件里是最稳妥的方式；
• 如果项目用了jQuery，也可以把document.addEventListener换成$(document).ready()，逻辑完全一致。

内容的提问来源于stack exchange，提问作者Bimal Parajuli