如何使用 jQuery 以 HTML5 样式显示自定义验证消息？

Question

我创建了这个 Javascript 函数来在上传之前验证文件扩展名：

function validateFileExtension(field, extensions){
  file_extension = field.val().split('.').pop().toLowerCase();
  if ($.inArray(file_extension,extensions) == -1){
    return false;
  }
  return true;
}

这就是我调用函数的方式：

  /* Displays loading message after user submits a form */
  $("form.show-loading").submit(function(e){

    /* Validates spreadsheet extension */
    if ($(this).hasClass("file-upload")){
      field = $("input.spreadsheet");
      if (!validateFileExtension(field,['xls'])){
        e.preventDefault();
        alert('Invalid file extension. Allowed: .xls');
        return;
      }
    }

    //Displays loading spin
    $("div.panel-body").html(
      "<div class='loading'>"+
        "<img src='"+base_url+"/assets/images/loading.gif' class='loading'><p>Loading... Please wait</p>"+
      "</div>");
  });

});

一切正常。我只想以另一种方式显示错误消息，而不是烦人的警报。

我可以像我们在 HTML5 表单元素中看到的那些验证消息气泡一样显示它吗？

例如：当输入具有“必需”属性并且浏览器突出显示显示消息气泡的该字段时。

Answer 1

这是 Bootstrap 的一个基本示例。

$(document).ready(function() {
  $('#validate').click(function() {
    $('#text').toggleClass('has-error');
    $('#text').parent().toggleClass('has-error');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="form-group">
  <input id="text" class="form-control" type="text" placeholder="Enter something here..." />
</div>
<input id="validate" type="button" value="Toggle" />