Validar input con javascript

No se si lo que buscas es a algo como esto, pero con Jquery seria algo asi:

      $(document).ready(function() {
         $('#searchForm').on('submit', function(event) {
            var $searchValue = $('#searchValue').val();
            if ($searchValue === "") {
               event.preventDefault();
                  var error = '<br><span style="color: red;">Error. Vacio.</span>';
                  $('#searchValue').after($(error).fadeOut(2000));
                  $('#searchValue').css( "border-color","red");
            }
         });
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="processadordeforma.php" method="POST" id="searchForm">
   <p>Search <input type="text" id="searchValue"></p>
   <button type="submit">Submit</button>
</form>

Nota que si el valor del input esta vacio. La forma no se postea, y se adjunta un <span> con error en rojo en la parte de abajo que desaparece despues de un tiempo. Puedes hacer esto para todos tus inputs y ademas agregar mas cosas de validacion que te den diferentes mensajes de error. Nota tambien que si el input si tiene un valor la forma se postea.

En tu código he encontrado par de errores que son interesantes de corregir.

En primer lugar cuando haces document.getElementById(uname) se te ha olvidado poner entre comillas el ID, ya que no lo está detectando como texto, si no como objeto.

Para solucionar que el formulario no haga el action si no cumple los requisitos, es necesario que utilices onsubmit.

function control() {

    if (document.getElementById('uname') == null || document.getElementById('uname')=="") {
        alert("El campo no puede estar vacío.");
        document.getElementById('uname').focus();
        return false;
    }

    return true;
}

<form class="modal-content animate" onsubmit="return control();" method="post" action="index.html" >
            <div class="imgcontainer">
                <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
                <img src="~/Images/00.png" alt="Avatar" class="avatar">
            </div>

            <div class="container">
                <label for="uname"><b>Usuario:</b></label>
                <input type="text" id="uname" placeholder="Ingrese usuario..." name="uname" >

                <label for="psw"><b>Contraseña:</b></label>
                <input type="password" placeholder="Ingrese contraseña..." name="psw">

                <button type="submit">Iniciar sesión</button>
                <label>
                    <input type="checkbox" checked="checked" name="remember"> Recuérdame
                </label>
            </div>

            <div class="container" style="background-color:#f1f1f1">
                <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancelar</button>
            </div>
        </form>

Al devolver false en el javascript, no se ejecutará el action. Si devuelves true lo ejecutará.

Otro error es la forma en la que das focus al input. Estabas usando una forma incorrecta. Para hacer focus debes hacer: document.getElementById('uname').focus();, ya que necesitas hacer referencia al input del HTML.

PD: teniendo en cuenta el potencial que tiene onsubmit, podrías aprovecharlo para aplicar más restricciones incluso al campo de contraseña. (O regex si el usuario debe ser un email, etc...)

Puedes echarle un vistazo a la documentación del focus().

Espero haberte ayudado.

Opciones:

• La forma mas simple sería el agregar el atributo required a tus inputs eso generaría que cuando presiones el botón del formulario si es que estos no se han llenado entonces te quedes en la misma página y el foco se ponga en dicho input

  <input type="text" required>
  

Por otro lado, si lo dejamos con JS, te manda a otra página por que:

• Tienes un atributo action declarado en el form diciéndole a donde mandar la información
• No estás previniendo el comportamiento de submit que el botón tendría se lleve a cabo

Como ejemplo para que veas como implementarlo pudieras hacerlo así:

• Obtenemos y asignamos en variables tanto a la caja de texto como al botón
• Al botón le agregamos un listener en su evento click
• Por dentro del callback prevenimos el comportamiento por defecto
• En un condicional evaluamos si la propiedad value del input esta vacía
  • En caso de estar vacía le indicamos que el input tenga el foco activado

    <form action="url">
      <input id="elemento" type="text">
      <input id="envio" type="submit">
    </form>
    <script>
        let botonEnvio = document.getElementById('envio');
        let texto      = document.getElementById('elemento');
      
        botonEnvio.addEventListener('click', (event) => {
          event.preventDefault();
          
          if (texto.value === '') {
            texto.focus();
          }
        })
    </script>

EDICIÓN

Para complementar mi respuesta considero que debería ser así:

• Sigues los pasos anteriores
• En el else harías una petición AJAX mandando a tu backend los datos
• Una vez recibidos en el backend harías la consulta SQL necesaria para verificar la existencia del registro
• Una vez lo verifiques si existe el registro entonces haces un redirect tal vez al panel donde corresponde y sino haces un redirect al mismo formulario de login