Comment puis-je imposer une saisie monétaire dans un input ?

Index

Le HTML5 offre une solution à ce problème avec l'attribut "pattern" d'un tag "input". En ajoutant un peu de CSS et de jQuery, on peu facilement gérer la validation de l'input et agir en conséquence sur la visibilité du bouton "submit" du formulaire.

Le contenu de l'attribut "pattern" est une expression rationnelle : RegExp (également dénommée "expression régulière" en traduction littérale).

Exemple

Code CSS :
    
input[type='text']:invalid { border-right: 8px solid red; }
input[type='text']:valid { border-right: 8px solid green; }
input[type='submit'] { display: none; }
Code JS : 

$( "input[type='text']", "#monFormID" ).on( "keyup", function(){
    if ( $( this ).is( ":valid" ) ){
        $( "input[type='submit']", "#monFormID" ).css( "display", "block" );
    } else {
        $( "input[type='submit']", "#monFormID" ).css( "display", "none" );
    }
});

$( "#monFormID" ).on( "submit", function(){
    console.log( "Le formulaire est valide !" );
    
    return false; // empêche la transmission du formulaire
});

Tests unitaires avec QUnit.