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

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

这是JS小提琴：https://jsfiddle.net/cu3nn84t/1/

Answer 1

jQuery validate不处理这类情况。

但是，您可以在showErrors callback内手动处理此操作，方法是迭代所有errorList项并检查相应元素是否具有[contenteditable]和{{1}属性。

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

Updated Example

error

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

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;
}

这适用于您的特定情况，但是，由于jQuery验证不是最初旨在验证<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>，因此可能会出现一些我不知道的意外副作用带有span属性的/ div元素。

作为旁注，我在jQuery validate GitHub repository上搜索了[contenteditable]相关问题，我找到了issue #1418，其中看起来合并了拉取请求以添加对{的支持{1}}属性。看起来虽然有still numerous related issues，所以在此期间，上面的解决方案是一个体面的解决方案，直到对该属性有正式的，有效的支持。

jQuery验证contentedable span或div的自定义消息

1 个答案: