Problema con codice js

Sto creando un login form ed ho un problema con il codice js, in breve questo codice deve aggiungere la classe "color" se i due campi di input (text e password) sono vuoti cioè il contenuto al loro interno è uguale a 0. Il problema è che il codice non funziona, inoltre anche un'iniezione tramite .innerHTML non funziona correttamente e non viene iniettato nel contenitore "fcontainer".

Codice:

Codice:

$(document).ready(function() { $(".username").on("input", function() { if ($(this).value.length <= 0) { $('.username-icon').addClass('color'); $(this).closest('.input').addClass('border-color'); $(document).ready(function() { $(".username").on("input", function() { if ($(this).value.length <= 0) { $('.username-icon').addClass('color'); $(this).closest('.input').addClass('border-color'); } else { $('.username-icon').removeClass('color'); $(this).closest('.input').removeClass('border-color'); } }); $(".password").on("input", function() { if ($(this).value.length <= 0) { $('.password-icon').addClass('color'); $(this).closest('.input').addClass('border-color'); } else { $('.password-icon').removeClass('color'); $(this).closest('.input').removeClass('border-color'); } }); }); document.getElementById('fcontainer').innerHTML = '<div id="sitecopyright">Copyright © Nome sito 2017 - '+ (new Date()).getFullYear() +'. Tutti i diritti riservati.</div><br><div id="copyrightauthor">Designed by <a href="#" target="_blank" rel="noopener">Author</a>';

Per quanto riguarda il primo problema, ti suggerisco di utilizzare required evitando JS.
Se proprio vuoi farlo con jquery, ho fatto una prova in questo modo:

Codice HTML:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title> test required </title> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $( document ).ready(function() { $("#nome").change(function() { if ($(this).val() == "") $(this).css("border", "1px solid red"); else $(this).css("border", "1px solid black"); }); }); </script> </head> <body> <form> <input type="text" name="nome" id="nome"> </form> </body> </html>

(fonte js)

Per il secondo problema dell'innerHTML, nella console ricevi qualche errore? Puoi linkare la pagina che da problemi?

Ciao!

Citazione:

Originalmente inviato da alemoppo

Per quanto riguarda il primo problema, ti suggerisco di utilizzare required evitando JS.
Se proprio vuoi farlo con jquery, ho fatto una prova in questo modo:

Codice HTML:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title> test required </title> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $( document ).ready(function() { $("#nome").change(function() { if ($(this).val() == "") $(this).css("border", "1px solid red"); else $(this).css("border", "1px solid black"); }); }); </script> </head> <body> <form> <input type="text" name="nome" id="nome"> </form> </body> </html>

(fonte js)

Per il secondo problema dell'innerHTML, nella console ricevi qualche errore? Puoi linkare la pagina che da problemi?

Ciao!

Io vorrei fare un controllo dei due campi di input con jquery, e se il contenuto è minore o uguale a 0 evidenzia il focus secondo le proprietà della classe css.