jQuery 为 contenteditable span 或 div 验证自定义消息

Question

当 contenteditable 跨度在表单中无效时，我试图显示自定义错误消息。

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

JS:

$(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
    }
  });
});

如果我删除 span 上的 required 属性，即使是默认消息也不会显示。我该如何解决这个问题？

这是 JS Fiddle: https://jsfiddle.net/cu3nn84t/1/

Answer 1

jQuery 验证不处理此类情况。

但是，您可以在 showErrors callback 中手动处理此问题，方法是遍历所有 errorList 项并检查相应元素是否具有 [contenteditable] 和 [name]属性。

从那里，您可以获得元素的 name 属性值并将其映射回您的自定义验证消息，并覆盖相应 error 对象上的消息属性。

Updated Example

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

  this.defaultShowErrors();
},

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

$(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']
      }
    },
    showErrors: function(errorMap, errorList) {
      errorList.forEach(function(error) {
        if ($(error.element).is('[contenteditable][name]')) {
          error.message = validate_messages[error.element.getAttribute('name')];
        }
      });

      this.defaultShowErrors();
    },
    submitHandler: function(form) { // for demo
      alert('valid form submitted'); // for demo
      return false; // for demo
    }
  });
});

div#errors {
  margin-bottom: 20px;
}
div#errors li {
  color: red;
}
span[contenteditable] {
  min-width: 150px;
  display: inline-block;
  border: 1px solid #ccc;
  background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<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>

这适用于您的特定情况，但是，由于 jQuery 验证最初不是 [=49=，因此可能会有一些我不知道的意外副作用] 旨在验证具有 [contenteditable] 属性的 span/div 元素。

作为旁注，我在 jQuery validate GitHub repository, and I found issue #1418 where it looks like a pull request was merged for adding support for the contenteditable attribute. It looks like there are still numerous related issues 上搜索了与 contenteditable 相关的问题，所以与此同时，上面的解决方案是一个不错的 work-around 直到有官方的，对该属性的功能支持。

jQuery 为 contenteditable span 或 div 验证自定义消息

jQuery Validate custom message for contenteditable span or div

javascript

jquery

jquery-validate