JSFiddle - React, Tailwind, and code Playground

HTML

<h2 style="text-align: center;"><span style="color: #993300;"><span style="font-size: medium;">Регистрация</span></span></h2>
						
												
						<form style="text-align: center;" action="save_user.php" method="post"><span style="color: #993300;"><span style="font-size: medium;"> </span></span>

						<br><div><p><label style="color: #993300"> Ваш логин:</label></p></div>
 
						<div><p> <span style="font-size: medium;"><input maxlength="15" name="login" id = "login" class="sf" size="15" type="text" /> <span id="message"></span></span></p></div>  

						<div><p><label style="color: #993300">Ваш пароль:</label></p></div>
 
 
						<div><span style="color: #993300;"><input maxlength="15" name="password" id = "password" class="sf" size="15" type="password" /></span></p></div>
 
						<div><p><label style="color: #993300;">Подтвердите пароль:</label></p></div> 
 
						<div><p><span style="color: #993300;"><input maxlength="15" name="password_1" id = "password_1"  class="sf" size="15" type="password" /><span id="message_p1"></span></span></p></div>

JavaScript

var input = document.getElementById('login');

	input.oninput = function() {
    
    var message;
    
    if (input.value.length < 5) {
       message = 'Логин слишком короткий';
    } else {
       message = '';
    }  
	if (input.value.length == 0) {
       message = '';
    }	
    document.getElementById('message').innerHTML = message;
    
    
}