如何使用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表單元素中看到的驗證消息氣泡一樣顯示它？

例如：當輸入具有'required'屬性並且瀏覽器突出顯示該字段時顯示消息提示框。

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" />