JSFiddle - React, Tailwind, and code Playground

by SonickSeven

HTML

<body>
	<form action="" id="test">
		<h2>Prueba</h2>
		<input type="text" data-opt="name" placeholder="Nombres" required/>
		<input type="text" data-opt="mobile" placeholder="Celular" required/>
		<input type="text" data-opt="nick" placeholder="Nickname" required/>
		<input type="submit" value="Guardar"/>
	</form>
</body>

CSS

#test{margin:0 auto;width: 70%;padding: 10px 0; border-radius: 8px; background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 26%, #207cca 75%, #7db9e8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(26%,#2989d8), color-stop(75%,#207cca), color-stop(100%,#7db9e8));
background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 26%,#207cca 75%,#7db9e8 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 26%,#207cca 75%,#7db9e8 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 26%,#207cca 75%,#7db9e8 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#2989d8 26%,#207cca 75%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );}
#test>h2{text-align: center; margin: 3px 0 4px;}
#test>input{display: block; border-radius: 4px; width: 80%; margin:3px auto;}

JavaScript

$('#test>input[data-opt="name"]').vali('abcdefghijklmnñopqrstuvwxyzáéiouó ');
	$('#test>input[data-opt="mobile"]').vali('0123456789');
	$('#test>input[data-opt="nick"]').vali('abcdefghijklmnñopqrstuvwxyzáéiou_@♥áéíóú☮1234567890');

(function( $ ) {
    $.fn.vali= function(cadena) {
        $(this).on({
            keypress : function(e){
                var key = e.which,
                    keye = e.keyCode,
                    tecla = String.fromCharCode(key).toLowerCase(),
                    letras = cadena;
                if(letras.indexOf(tecla)==-1 && keye!=9&& (key==37 || keye!=37)&& (keye!=39 || key==39) && keye!=8 && (keye!=46 || key==46) || key==161){
                    e.preventDefault();
                }
            }
        });
    };
})( jQuery );