Per validazioni lato client in javascript nativo, si distacca da ogni framework javascript per il suo ciclo di vita - Valida form ed elementi singoli tag Html
- Includi jPagevalid sulla tua pagina prima della chiusura tag
<script src="/path/dist/1.x.x/jpagevalid.js"></script>| Metodo | Esempio | Descrizione |
|---|---|---|
| get | jPaging.get('nomeIstanza') | crea una nova istanza se non presente o ritorna l'istanza associata al nome passato come parametro |
| form | jPaging.form('id-form-html') | inizializza una validazione per il form, crea una nova istanza associa all'istanza come nome l'id passato come parametro |
| isSubmit | jPaging.get('nomeIstanza').isSubmit(false/true) | abilita o disabilita l'invio modulo per l'evento submit associato al form |
| authorizeSend | jPaging.get('nomeIstanza').authorizeSend() | abilita comunque e sempre l'invio modulo anche in presenza di validazione negativa |
| addValidation | jPaging.addValidation('nome-funzione',funzione,'messaggio-di-errore') | addizziona alle funzioni di default una nuova funzione per validazioni personalizzate |
| changeFnMessage | jPaging.get('nomeIstanza').changeFnMessage('nome-funzione','messaggio-modificato') | cambia un messaggio associato ad una funzione di default o personalizzata |
| valid | jPaging.get('nomeIstanza').valid() | valida il form legato all'istanza se passato il parametro id valida l'elemento singolo del form jPaging.get('nomeIstanza').valid('id-input') |
| addInput | jPaging.get('nomeIstanza').addInput({object-javascript}) | addiziona un elemento da validare all'istanza corrente |
| include | jPaging.get('nomeIstanza').include() | addiziona tutti gli elementi con attributo jms-valid="{type:'required',etc..,etc..}" presenti nella pagina html all'istanza per la validazione |
| onChange | jPaging.get('nomeIstanza').onChange(function(valid){}) | esegue la funzione assegnata ad ogni cambiamento di un modulo, nel costruttore viene iniettato la validazione del form true/false |
| checkOnSubmit | jPaging.get('nomeIstanza').checkOnSubmit() | abilita - disabilita in modo automatico il pulsante submit per l'inivo del modulo [ di default e settato a false ] |
| checkOffSubmit | jPaging.get('nomeIstanza').checkOffSubmit() | disabilita il modo automatico, lascia all'utente gestire il pulsante submit |
<form id="myformTest" action="...">
<input type="text" id="01" jms-valid="{type:'requred,number'}">
<input type="submit" value="salva">
</form> jPagevalid.form('myformTest')esempio di nuova istanzia, applicare un validatore ad un form
jPagevalid.form('myformTest')
// Oppure
jPagevalid.get('myformTest').form()esempio recupero istanzia
jPagevalid.get('myformTest')valida tutto il form
jPagevalid.get('myformTest').valid()valida un singolo elemento del form
jPagevalid.get('myformTest').valid('idElemento') <div id="myTagTest">
<input type="text" id="01" jms-valid="{type:'requred,number'}">
<input type="text" id="02" jms-valid="{type:'requred,email'}">
</div> jPagevalid.form('myTagTest') <body>
<input type="text" id="01" jms-valid="{type:'requred,emain'}">
<input type="chekbox" id="02" jms-valid="{type:'requred'}">
<input type="text" id="03" jms-valid="{type:'requred,number'}">
<input type="text" id="04" jms-valid="{type:'requred,data'}">
<input type="text" id="05" jms-valid="{type:'requred,time'}">
</body> jPagevalid.get('mybody').include();per validare l'itero body
jPagevalid.get('mybody').valid()per validare il singolo elemento del body
jPagevalid.get('mybody').valid('01')
jPagevalid.get('mybody').valid('02')
jPagevalid.get('mybody').valid('03')jPagevalid.addValidation('nome-funzione',function(v){},'messaggio di errore');oppure
jPagevalid.form('myformTest').addValidation('nome-funzione',function(v){},'messaggio di errore'); <form id="myformTest" action="...">
<input type="text" id="dataInizio" jms-valid="{type:'requred,date'}">
<input type="text" id="dataFine" jms-valid="{type:'requred,date,checkendate'}">
<input type="submit" value="salva">
</form> jPagevalid.addValidation("checkendate",function(value,message,input,search) {
var bbol = false;
var dataemissioneini = search('dataInizio').value; // recupero l'elemento input[dataInizio] presente nell'oggetto jPagevalid
var dataemissionefine =search('dataFine').value; // recupero l'elemento input[dataFine] presente nell'oggetto jPagevalid
if ( dataemissioneini != '' && dataemissionefine != '' )
{
var datainizio = new Date(dataemissioneini);
var datafine = new Date(dataemissionefine);
if (datafine.getTime() > datainizio.getTime())
bbol = true;
}
return bbol;
}, 'Inserire una data maggiore della data di inizio')
.form('myformTest')
.changeFnMessage('date','Si prega di specificare un formato data valido (GG/MM/AAAA)') // cambio il messaggio del metodo di defasult data
.isSubmit(false); // disabilito l'invio del modulo tramite l'evento submit<form id="formTest4" class="needs-validation" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName4" placeholder="" value="">
<div class="invalid-feedback" firstName4>
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="total4">Total</label>
<input type="text" class="form-control" id="total4" placeholder="" value="">
<div class="invalid-feedback" total4>
Valid last name is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="email">Email </label>
<input type="email" class="form-control" id="email4" placeholder="you@example.com">
<div class="invalid-feedback" email4>
Please enter a valid email address for shipping updates.
</div>
</div>
<div class="mb-3">
<label for="testoMin">Testo min 20 caratteri</label>
<input type="text" class="form-control" id="testomin" placeholder=" ">
<div class="invalid-feedback" testomin>
min 20 caratteri.
</div>
</div>
<hr class="mb-4">
<button id="btnSubmit" class="btn btn-primary btn-lg btn-block" type="submit">save</button>
</form>var obj_form = {
form: 'formTest4',
submit: true,
inputs: [
{
input: 'firstName4',
type: 'required'
},
{
input: 'total4',
type: 'required,number',
keyup: true,
keypress: true
},
{
input: 'email4',
type: 'required,email',
},
{ input: 'testomin',
type: 'required',
keyup: true,
keypress: true
}]}
jPagevalid.form(obj_form); jPagevalid.form('formTest4')
.addInput({input: 'firstName4',type: 'required'})
.addInput({input: 'total4',type: 'required,number'})
.addInput({input: 'email4',type: 'required,email'})
.addInput({input: 'testomin',type: 'required,alphanumeric'}) Inserito come oggetto javascript
{input: 'testomin',type: 'required',boxErr:'...',focus:false,blur:false,keyup:true,keypress:true,valid:function(v){},message:'...',equalsTo:'id1'}Inserito tramite attribute html jms-valid
<input type="text" jms-valid="{type:'requred,number',boxErr:'...',focus:false,blur:false,keyup:true,keypress:true,valid:function(v){},message:'...',equalsTo:'id1'}"> | Proprieta | Type | Descrizione |
|---|---|---|
| input | String | id del tag input da validare, obbligatorio se inserito in oggetto javascript. Non obbligatorio se inserito come oggetto in attribute jms-valid={} |
| type | String | nome della funzione di validazione separare piu nomi con la virgola(,) obbligatorio se si vuole eseguire una validazione |
| boxErr | String | id del tag che contiene il messaggio di errore, in alternativa se non si vuole utilizzare la proprieta, inserite come nome attributo html l'id del tag input nel tag che contiene il messaggio di errore esempio:<input id="citta"><div class="error" citta> messaggio di errore</div> [facoltativo] |
| focus | boolean | abilita e disabilita la validazione su focus di default e abilitata[facoltativo] |
| blur | boolean | abilita e disabilita la validazione su blur di default e abilitata[facoltativo] |
| keyup | boolean | abilita e disabilita la validazione su keyup di default e disabilitata[facoltativo] |
| keypress | boolean | abilita e disabilita la validazione su keypress di default e disabilitata[facoltativo] |
| valid | function | ulteriore funzione personalizzata la funzione deve ritornare un valore boolean true/false[facoltativo] |
| message | String | messaggio di errore personalizzato se inserito avrà prevalenza su tutti i messaggi[facoltativo] |
| equalsTo | String | id del tag input da uguagliare, separare piu id con la virgola(,)[facoltativo] |
| requiredIf | String or function | valida il campo solo se il campo indicato con l'id o la funzione passata ritorna esito positivo esempio: [campo1 checkbox], [campo2 input requiredIf:idcampo1] richiedo la validazione del campo2 solo se il campo1 è selezionato ,[facoltativo] |
jPagevalid è disponibile sotto la licenza MIT. Vedi il LICENSE per maggiori informazioni.