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, 1.009 hits)