Visualizzazione risultati 1 fino 3 di 3

Discussione: Problema con codice js

  1. #1
    isibisitgbots non è connesso Neofita
    Data registrazione
    04-09-2017
    Messaggi
    18

    Predefinito 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>';
    Ultima modifica di isibisitgbots : 16-02-2018 alle ore 02.43.21

  2. #2
    L'avatar di alemoppo
    alemoppo non è connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,498

    Predefinito

    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!
    Ultima modifica di alemoppo : 16-02-2018 alle ore 15.37.26

  3. #3
    isibisitgbots non è connesso Neofita
    Data registrazione
    04-09-2017
    Messaggi
    18

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    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.

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •