Piemonte Lab

Esperienze di programmazione

Customizzare messaggi di errore html5 (required,format,type,pattern) - esempio di un numero

<div class="col-lg-3">
<input type="text" oninvalid="setCustomValidity('Inserisci un numero')" onchange="try{setCustomValidity('')}catch(e){}" pattern="[0-9]+([,\.][0-9]+)?" class="form-control" id="numero" placeholder="numero" required="required">
<span  >Numero</span>
</div>

in questo modo se il form non è valido parte la setCustomValidity che sovrascrive il messaggio di errore del browser e sull'onchange del input resetta l'errore.

Bootbox: alert, confirm e finestre modali (dialog) customizzabili per bootstrap.

Questo è il link ufficiale del progetto javascript: http://bootboxjs.com/

Necessita di jquery e bootstrap.

Un po' di codice:

- Nell'head dell'html

<script src="js/jquery.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js" type="text/javascript"></script>

<script src="js/bootbox.min.js" type="text/javascript"></script>

<link href="css/bootstrap.min.css" rel="stylesheet">

(naturalmente nella cartella js metteremo i tre file js e nella cartella css il file css di bootstrap).

 

Codice javascript:

bootbox.alert("Messaggio",function(){

//Qui c'è la funzione eventuale che verrà scatenata dopo il click sull'ok, o dopo la chiusura della finestra modale.

}


oppure:

bootbox.confirm("Domanda",function(result){

  if(result){

     //se hai premuto 'si', result varrà true.

 });


La stessa cosa avviene per prompt (finestra con textbox) e per le finestre modali customizzabili, in cui posso decidere stile, attributi e callback della finestra).

Per definire invece lo stile dei bottoni occorre settare nel css le proprietà:

".modal-footer .btn-default" e ".modal-footer .btn-primary"



Nella versione utilizzabile con bootsrap 3 c'è un errore: viene rimossa la scrollbar verticale dopo la comparsa della finestra modale (perché viene aggiunta al body la proprietà '.modal-open')

Per risolvere questo inconveniente occorre settare nel css:

body {overflow-y:scroll !important}