如何使用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" />