Wie werden benutzerdefinierte Validierungsnachrichten im HTML5-Format mit jQuery angezeigt?

Question

Ich habe diese Javascript-Funktion die Dateierweiterung vor dem Hochladen zu überprüfen:

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

Dies ist, wie ich die Funktion aufrufen:

/* 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>"); 
    }); 

}); 

Alles funktioniert gut. Ich möchte die Fehlermeldung nur auf eine andere Art und Weise anzeigen als eine lästige Warnung.

Kann ich es wie die Bestätigungsbotschaften anzeigen, die wir in HTML5-Formularelementen sehen?

Zum Beispiel wenn eine Eingabe die Eigenschaft 'required' hat und der Browser dieses Feld mit einer Nachrichtenblase markiert.

Answer 1

Hier ist ein grundlegendes Beispiel für 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" />