JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div class="componenti_attive riquadro" style="display: block;">
<h2>LE COMPONENTI POSITIVE DEL TUO BILANCIO</h2>
<p class="title redd1 has-success" style="display: block;">Reddito mensile del primo componente
<input id="a"name="reddito1" type="text" class="form-control num positivi valid" placeholder="Redditi primo componente ..." data-validation="number" data-validation-error-msg="Inserisci solo numeri senza virgole e decimali!" data-validation-optional="true" style=""></p>

<div class="btnPrint indietro1"><h2 class="stamp printMe">INDIETRO</h2></div>
<div class="btnPrint avanti2 avant"><h2 class="stamp printMe">AVANTI</h2></div>

<p class="title redd_altri1 has-error" style="display: block;">Indicare il totale degli altri redditi (es. pensioni, indennitĂ , rendite, etc.)
<input name="altri_redditi" type="text" class="num positivi form-control error" placeholder="Inserisci qui il totale mensile degli altri redditi ..." data-validation="number" data-validation-error-msg="Inserisci solo numeri senza virgole e decimali!" data-validation-optional="true" style="border-color: red;"><span class="help-block form-error">Inserisci solo numeri senza virgole e decimali!</span></p>
</div>

CSS

.form-error{
	background-color: #066;
	height: 300px;
	width: 300px;
	position: absolute;
	top: 0px;
	right: 0px;
	display:none;
}

JavaScript

$('.avant').hide()
	var tot=/^[+-]?\d+(\.\d+)?([eE][+-]?\d+)?$/
	$('input').on('keyup',function(){
		var str = $(this).val();
		if(tot.test(str)) {
          $('.form-error').hide()
           }else{$('.form-error').show()}
		   if($('.form-error').is(':visible')){
			   $('.avant').hide()
			   }else{
				$('.avant').show()   
				}
        })