Mettre le code en vrac dans l'objet App comme ci-dessous n'est pas une bonne idée. Pour un page complexe, cela deviendra très vite un fouillis inextricable.
var App = ( function( $, W ){
var jObjForm = $( "#monFormID" ),
jObjInputText = jObjForm.find( "input[type='text']" ),
jObjSubmit = jObjForm.find( "input[type='submit']" ),
inputTextKeyupHandler = function(){
if ( $( this ).is( ":valid" ) ){
jObjSubmit.css( "display", "block" );
} else {
jObjSubmit.css( "display", "none" );
}
},
formSubmitHandler = function(){
console.log( "Le formulaire est valide !" );
return false; // empêche la transmission du formulaire
};
return {
"ready" : function(){
jObjInputText.on( "keyup", inputTextKeyupHandler );
jObjForm.on( "submit", formSubmitHandler );
}
};
})( jQuery, window );
$( App.ready );
});
Vous devez grouper vos codes concernant une même cible en créant un objet, ci-dessous l'objet Form.
var App = ( function( $, W ){
var jObjForm = $( "#monFormID" ),
jObjInputText = jObjForm.find( "input[type='text']" ),
jObjSubmit = jObjForm.find( "input[type='submit']" );
var Form = {
"init" : function(){
jObjInputText.on( "keyup", Form.inputTextKeyupHandler );
jObjForm.on( "submit", Form.submitHandler );
},
"inputTextKeyupHandler" : function(){
if ( $( this ).is( ":valid" ) ){
jObjSubmit.css( "display", "block" );
} else {
jObjSubmit.css( "display", "none" );
}
},
"submitHandler" : function(){
console.log( "Le formulaire est valide !" );
return false; // empêche la transmission du formulaire
}
};
return {
"ready" : function(){
Form.init();
}
};
})( jQuery, window );
$( App.ready );
Pour aérer le code, il faut mettre chaque objet autonome dans un fichier séparé.
Fichier Form.js :
var jObjForm = $( "#monFormID" ),
jObjInputText = jObjForm.find( "input[type='text']" ),
jObjSubmit = jObjForm.find( "input[type='submit']" ),
Form = {
"init" : function(){
jObjInputText.on( "keyup", Form.inputTextKeyupHandler );
jObjForm.on( "submit", Form.submitHandler );
},
"inputTextKeyupHandler" : function(){
if ( $( this ).is( ":valid" ) ){
jObjSubmit.css( "display", "block" );
} else {
jObjSubmit.css( "display", "none" );
}
},
"submitHandler" : function(){
console.log( "Le formulaire est valide !" );
return false; // empêche la transmission du formulaire
}
};
Fichier faq.js :
var App = ( function( $, W ){
return {
"ready" : function(){
Form.init();
}
};
})( jQuery, window );
$( App.ready );