jQuery Validator将工具提示显示为错误消息

Question

我正在使用jquery Validation来验证表单，以下是HTML代码。我面临的问题是当我提供工具提示时，无论错误的类型如何，验证消息都会显示为工具提示文本。

我希望错误消息说“请输入至少5个字符。”。我该如何实现？

<div class="form-group" style="padding-right: 5px;">
  <label for="name" class="control-label col-xs-2">Name</label>
  <div class="col-xs-5" style="width: auto;"><input name="name" id="name" type="text" minlength="5" title="please enter name" data-type="text" class="form-control"><span style="display: inline;"><label for="name" generated="true" class="invalidElem" style="display: inline-block;">please enter name</label></span></div>
</div>

Answer 1

您可以为规则添加规则和其他消息，如下所示。

$('#myform').validate({
  rules: {
    name: {
      required: true,
      minlength: 5

    }

  },
  messages: {
    name: {
      required: 'Please Enter Name.',
      minlength: 'Please enter at least 5 characters.'

    }
  },
  submitHandler: function(form) {
    alert('valid form submitted');
    return false;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
<form id="myform">
  <div class="form-group" style="padding-right: 5px;">
    <label for="name" class="control-label col-xs-2">Name</label>
    <div class="col-xs-5" style="width: auto;"><input name="name" id="name" type="text" minlength="5" title="please enter name" data-type="text" class="form-control"><span style="display: inline;"><label for="name" generated="true" class="invalidElem" style="display: inline-block;"> </label></span></div>
  </div>
  <input type="submit" />
</form>