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>
5 respuestas
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');
}
});
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>
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');
}
});
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>
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>
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.