Usando jQuery para la validación del formulario de registro de usuario

Question

Estoy tratando de crear un sitio web para el aprendizaje / ejercicio, pero estoy atascado en la validación de registro de usuario. No hay mensaje de error y no pasa nada.

Aquí hay un JsFiddle Link.

También probé:

if(user_name.length < 3 && user_name!=="")

Y

if(user_name.length < 3)

Fragmento de código:

var user_name = $('#username').val();

$('#username').on('keyup',function(){
  if(user_name.length < 3 && user_name!=""){
    $('#username-info').html('Username must be at least 3 characters.');
  }
  else if(user_name.length > 3){
    $('#username_info').html('No problem');
  }
});

#username-info {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="username">
<p id="username-info"></p>

javascript jquery

0

BarbarosHayrettin 10 may. 2019 a las 11:45

Answer 1

Las funciones keyup deben activarse en el campo de entrada.

Las funciones keyup actualizan el username (de lo contrario, será lo mismo).

$('#username').on('keyup',function(){
    var user_name = $('#username').val();
  if(user_name.length < 3 && user_name!=""){
    $('#username-info').html('Username must be at least 3 characters.');
  }
  else if(user_name.length >= 3){
    $('#username-info').html('No problem');
  }
});

0

Silvan 10 may. 2019 a las 09:15

Answer 2

Creo que acaba de poner identificadores incorrectos Y su variable user_name solo se inicializa una vez al inicio, por lo que su valor siempre está vacío.

$('#username').on('keyup', function() {
  var user_name = $(this).val();
  if (user_name.length < 3 && user_name != "") {
    $('#username-info').html('Username must be at least 3 characters.');
  } else if (user_name.length > 3) {
    $('#username-info').html('No problem');
  }
});

#username-info {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="username">
<p id="username-info">
</p>

0

demo 10 may. 2019 a las 08:56

Answer 3

Tiene muchos errores tipográficos en su secuencia de comandos y buscó el párrafo en clave arriba, no su campo de entrada.

var user_name = "";
$('#username').on('keyup',function(){
   user_name = $('#username').val();

  if(user_name.length <= 3 && user_name!=""){
    $('#username-info').html('Username must be at least 3 characters.');
  }
  else if(user_name.length > 3){
    $('#username-info').html('No problem');
  }
});

0

Nick 10 may. 2019 a las 10:32

Answer 4

Actualmente, user_name se declara una vez al comienzo de su secuencia de comandos, por lo que nunca se actualizará.

Luego, adjuntó un controlador de eventos keyup en <p#username-info>, no <input#username>, de modo que cuando ingrese algo en él, no se activará nada.

Por lo tanto, debe actualizar user_name en cada entrada en <input#username>.

// Here, you need to attach the event handler of #username, not #username-info.
$('#username').on('keyup', function() {
  // And here, you get the value of your input.
  let user_name = $('#username').val();
  // let user_name = $(this).val(); works too.

  // Writing "(user_name)" in a condition is the same as "(user_name !== '')".
  if (user_name && user_name.length < 3) {
    $('#username-info').html('Username must be at least 3 characters.');
  } else if (user_name.length >= 3) {
    // You wrote "#username_info" instead of "#username-info" here.
    $('#username-info').html('No problem');
  }
});

#username-info {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="username">
<p id="username-info">
</p>

0

Kévin Bibollet 10 may. 2019 a las 09:13

Answer 5

Utilizo su código como referencia e hice algunos cambios en él para una mejor salida.

Puede probar esto, aquí también estoy cambiando el código de color para el mensaje de error para que obtenga un mejor resultado.

$('#username').on('keyup',function(){
    var user_name = $('#username').val();
	if(user_name.length < 3 && user_name != ""){
	    $('#username-info').html('Username must be at least 3 characters.');
		$('#username-info').addClass('username-info');
		$('#username-info').removeClass('username-info-2');
	}
	else if(user_name.length >= 3){
		$('#username-info').html('No problem');
		$('#username-info').addClass('username-info-2');
		$('#username-info').removeClass('username-info');
	}
});

.username-info {
  color: red;
  }
.username-info-2 {
  color: blue;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="username">

<p id="username-info"></p>

0

Nick 10 may. 2019 a las 09:06

Usando jQuery para la validación del formulario de registro de usuario

5 respuestas

Nuevas preguntas

javascript