Come convalidare un modulo con Bootstrap Validator?

Le regole di convalida per gli attributi HTML5 standard sono gestite completamente dal browser utilizzando l’API di convalida della restrizione HTML5. ¿ Come utilizzando Validator Bootstrap ?

Pertanto, questo componente aggiuntivo non ha il controllo di cose come ciò che si qualifica come indirizzo e-mail o URL valido.

Se ritieni di aver bisogno di convalide più restrittive per questi campi, puoi utilizzare l’attributo modello per limitare ulteriormente ciò che è accettabile.

Tuttavia, fai attenzione a non essere troppo restrittivo , in quanto ciò potrebbe portare a falsi negativi e una scarsa esperienza utente.

Questo componente aggiuntivo aderisce alle convenzioni stabilite dai principali componenti aggiuntivi jQuery di Bootstrap, quindi assicurati di verificarli per comprendere meglio gli obiettivi e il design di questo componente aggiuntivo.

La convalida dei moduli può essere abilitata nel markup tramite API di dati o JavaScript. Abilita automaticamente la convalida del modulo aggiungendo data-toggle = “validator” al tuo elemento del modulo.

Come convalidare un modulo con Bootstrap Validator? 1

Come usare Bootstrap Validator?

La convalida del modulo può essere abilitata nel markup tramite l’API dei dati o tramite JavaScript. Abilita automaticamente la convalida del modulo aggiungendo data-toggle = “validator”.

<form role = "form" data-toggle = "validator">

Le regole di convalida sono specificate nelle voci del modulo tramite i seguenti attributi HTML5 standard:

</ Form>

type = "email"
type = "url"
type = "number"

Con ulteriori restrizioni tramite gli attributi max, min e Attributes

  • Per i tipi di immissione del testo, ricerca, tel, url o e-mail richiesti
pattern = "Reg (ular)? Exp (ression)?"

Attributi non standard

  • Assicurarsi che due campi corrispondano, ad esempio, alle conferme della password
data-match = "# inputToMatch"
  • Imponi un numero minimo di caratteri
 data-minlength = "5"
  • Invia una richiesta AJAX per determinare se il campo è
 data-remote = "/ path / to / remote / validator"
  • Valido o no, assicurati di assegnare alla voce un attributo name
/ path / to / remote / validator? <nome> = <valore>

Compatibilità tra i browser

Poiché questo componente aggiuntivo dipende dall’API di convalida della restrizione HTML5 , Internet Explorer 9 e precedenti non sono supportati.

Come convalidare un modulo con Bootstrap Validator? 2

Campi validati

Per impostazione predefinita, il validatore convaliderà i campi presenti solo quando il plug-in è inizializzato.

Se il tuo modulo ha una serie dinamica di campi , devi chiamare $ (…). Convalida (‘aggiornamento’) per informare il componente aggiuntivo che la serie di campi da convalidare è cambiata.

$ .fn.validator.Constructor.INPUT_SELECTOR = ': input: not ([type = "hidden"], [type = "submit"], [type = "reset"], button)'

È possibile ignorare questo valore dall’interno del codice se è necessario modificare questo comportamento predefinito. In alternativa.

È possibile aggiungere data-validate = “true” / data-validate = “false” a una voce specifica per forzarne l’inclusione / esclusione nel set di campi convalidati.

 

Potrebbe interessarti

Lascia un commento