Validazione Modulo personalizzabile con jQuery plugin
24 mar
Inserito da Spina Rosario in Componenti, Html, Javascript, jQuery, Moduli, Programmazione
La convalida del modulo è uno degli aspetti più importanti su qualsiasi applicazione web. Più il Modulo è sicuro più allo stesso tempo sarà sicura l’applicazione.
La validazione di un modulo mediante jQuery è davvero semplice e mediante questo plugin può essere anche molto personalizzabile.

Funzionamento
Semplice, in questo plugin dobbiamo impostare tre parametri per ogni classe richiesta. L’utente può impostare la propria classe e definire la regola. Inoltre, l’utente può anche impostare gli eventi OnError e OnValid con una particolare classe dando così all’utente un’altra possibilità di personalizzazione, permettendo di aggiungere effetti anche animati grazie a jQuery().
Qui di seguito il codice javascript utilizzato per l’esempio:
$( function() {
$( '#create-post-form' ).ipValidate( {
required : { //required is a class
rule : function() {
return $( this ).val() == '' ? false : true;
},
onError : function() {
if( !$( this ).parent().hasClass( 'element_container' ) ) {
$( this ).wrap( '
' ).after( '<span>' + $( this ).attr( 'rel' ) + '</span>' );
} else if( !$( this ).parent().hasClass( 'error_div' ) ) {
$( this ).next().text( $( this ).attr( 'rel' ) ).parent().addClass( 'error_div' );
}
},
onValid : function() {
$( this ).next().text( '' ).parent().removeClass( 'error_div' );
$(this).focus();
}
},
nonzero : { //nonzero is a class
rule : function() {
return $( this ).val() == 0 ? false : true;
},
onError : function() {
$( this ).css( 'border', '4px solid #C00' );
},
onValid : function() {
$( this ).css( 'border', '4px solid #09F' );
}
},
postOptions : { //postOptions is a class
rule : function() {
return $( 'input[type=checkbox]:checked' ).length < 1 ? false : true;
},
onError : function() {
$( '.chk_div', this ).css( 'border', '4px solid #C00' );
},
onValid : function() {
$( '.chk_div', this ).css( 'border', '4px solid #09F' );
}
},
submitHandler : function() {
alert( 'Il Modulo è pronto per essere inviato.' );
return false;
}
});
});
Requisiti: jQuery
Demo: http://www.web-developers.it/demo/simple-form-validation-jquery.html
Download:jquery-validate.zip (800 bytes, 139 hits)





Nessun commento per “Validazione Modulo personalizzabile con jQuery plugin”