Javascript jQuery为可编辑的span或div验证自定义消息

当

contenteditable

span在表单中无效时，我试图显示自定义错误消息

我的HTML：

<div id="errors"></div>
<form method="post" action="#">
    <span required name="first_name" id="first_name" contenteditable placeholder="First Name"></span><br><br>
    <input type="text" name="something" id="something"/><br><br>
    <button type="submit">Submit</button>
</form>

如果删除

span

上的

required

属性，即使默认消息也不会显示。我怎样才能解决这个问题

---

以下是JS FIDLE:

jQueryValidate不会处理这样的情况

但是，您可以在内部通过迭代所有

错误列表

项并检查相应元素是否具有

[contenteditable]

和

[name]

属性来手动处理此问题

从那里，您可以获取元素的

名称

属性值，并将其映射回自定义验证消息，并覆盖相应

错误

对象上的消息属性

基于您提供的代码的完整代码段：

$（文档）.ready（函数（）{
var validate_消息={
名字：'请输入您的名字'，
某物：“请输入某物”
}
$（'form'）。请验证({
忽略：[]，
errorLabelContainer:“#错误”，
“李”，
规则：{
“名字”：{
必填项：true
},
“某物”：{
必填项：true
}
},
信息：{
“名字”：{
必需：验证\u消息['first\u name']
},
“某物”：{
必需：验证_消息['something']
}
},
错误：功能（错误映射、错误列表）{
errorList.forEach（函数（错误）{
if（$（error.element）.is（'[contenteditable][name]'））{
error.message=validate_messages[error.element.getAttribute（'name'）；
}
});
this.defaultRors（）；
},
submitHandler:函数（表单）{//用于演示
警报（“已提交的有效表单”）；//用于演示
返回false；//用于演示
}
});
});
div#错误{
边缘底部：20px；
}
第#段错误李{
颜色：红色；
}
span[内容可编辑]{
最小宽度：150px；
显示：内联块；
边框：1px实心#ccc；
背景：白色；
}









提交
完美！这正是我想要的答案——谢谢！这里的主要问题是这个新特性的一个主要bug，显然从未被报道过。无法通过
.validate（）
分配规则（或自定义消息）。我在这里创建了一个新的GitHub错误报告：
$(document).ready(function() {
  var validate_messages = {
    first_name: 'Please enter your name',
    something: 'Please enter something'
  }

  $('form').validate({
    ignore: [],
    errorLabelContainer: '#errors',
    wrapper: 'li',
    rules: {
      'first_name': {
        required: true
      },
      'something': {
        required: true
      }
    },
    messages: {
      'first_name': {
        required: validate_messages['first_name']
      },
      'something': {
        required: validate_messages['something']
      }
    },
    submitHandler: function(form) { // for demo
      alert('valid form submitted'); // for demo
      return false; // for demo
    }
  });
});

showErrors: function(errorMap, errorList) {
  errorList.forEach(function (error) {
    if ($(error.element).is('[contenteditable][name]')) {
      error.message = validate_messages[error.element.getAttribute('name')];
    }
  });

  this.defaultShowErrors();
},