Nello script #73 abbiamo visto come gestire le nuove funzionalità di validazione delle form in HTML5.
Una delle richieste più diffuse da parte degli sviluppatori è quella di poter personalizzare il messaggio di errore visualizzato, che è gestito direttamente dal browser. Questo è possibile attraverso JavaScript, invocando il metodo setCustomValidity.
Nell'esempio che segue viene fatto direttamente in linea, intercettando gli eventi oninvalid e onchange per andare ad impostare, rispettivamente, il messaggio da visualizzare e rimuoverlo in caso il campo fosse valido.
<form> <input name="FirstName" type="text" required="true" oninvalid="this.setCustomValidity('Questo campo deve essere riempito')" onchange="this.setCustomValidity('')" /> <input type="submit" /> </form>
Ecco il risultato su IE (a sinistrat) e Chrome (a destra):
Il supporto per questa funzionalità è disponibile con IE10+, Chrome, Safari, FireFox e Opera.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare un'applicazione React e configurare Tailwind CSS
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Generare file PDF da Blazor WebAssembly con iText
Verificare la provenienza di un commit tramite le GitHub Actions
Gestire undefined e partial nelle reactive forms di Angular
Come migrare da una form non tipizzata a una form tipizzata in Angular
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Generare file per il download da Blazor WebAssembly
Limitare le richieste lato server con l'interactive routing di Blazor 8
Ottimizzare il mapping di liste di tipi semplici con Entity Framework Core
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Monitorare i server on-premises con Azure Arc
I più letti di oggi
- Evitare il flickering dei componenti nel prerender di Blazor 8
- Rilasciata la Beta 2 di Visual Studio 2008
- tra pochi minuti inizia la keynote della seconda giornata. seguila live su http://aspitalia.com/mix-11 #mix11
- .@dbochicchio ora su #aspnetcore 2 a #netconfit https://aspit.co/netconf-17
- Utilizzare angular-cli per creare una direttiva in Angular 2
- Windows Vista: il ritorno di WinFS con la beta1
- .@CristianCivera tra poco su #azure con i suoi tips&tricks per lo sviluppatore web: https://aspit.co/web15-live #aspilive
- Le novità di C# 10