Comprobación de la coincidencia de contraseña al escribir

Tengo un formulario de registro con los campos de entrada "contraseña" y "confirmar contraseña". Quiero verificar si la "contraseña de confirmación" coincide con la "contraseña" mientras el usuario la escribe y aparece el mensaje correspondiente. Así que traté de hacer esto:Comprobación de la coincidencia de contraseña al escribir

Este es el código HTML:

<div class="td"> 
    <input type="password" id="txtNewPassword" /> 
</div> 
<div class="td"> 
    <input type="password" id="txtConfirmPassword" onChange="checkPasswordMatch();" /> 
</div> 
    <div class="registrationFormAlert" id="divCheckPasswordMatch"> 
</div>

y esta es la función checkPasswordMatch():

function checkPasswordMatch() { 
    var password = $("#txtNewPassword").val(); 
    var confirmPassword = $("#txtConfirmPassword").val(); 

    if (password != confirmPassword) 
     $("#divCheckPasswordMatch").html("Passwords do not match!"); 
    else 
     $("#divCheckPasswordMatch").html("Passwords match."); 
}

eso no validar mientras se escribe, sólo cuando el usuario deja el campo

Intenté usar onKeyUp en lugar de onChange - tampoco funcionó.

Entonces, ¿cómo se puede hacer?

¡Gracias!

Fuente

2012-03-15 Igal

Creo que es un error lógico ... KeyUp bind ur mensaje en cada evento de teclado Creo que es mejor llamar a la función en el evento de foco –

La sintaxis no válida de hecho es el problema. Como se explica en la respuesta siguiente, puede manejar todo esto en jquery, ya que lo está usando o simplemente cambiar el nombre de los eventos a onchange (onchange se activa solo cuando el campo pierde el foco, por lo que tan pronto como vaya a en otro campo o haga clic afuera, debe obtener lo que necesita) o use onkeyup como nombre de evento en lugar de onChange y onKeyUp. –

@SanjayGoswami: la secuencia de comandos no se vincula varias veces. Estos eventos intrínsecos descritos por w3c toman un valor que es un script y lo ejecuta cuando ocurre el evento para ese elemento. –

Sintaxis probablemente no válida en su evento onChange, evito usar esto (dentro del html) ya que creo que es complicado y es bastante difícil mantener JavaScript ordenado en el mejor de los casos.

Preferiría registrar el evento en el evento listo para documentos en javascript. Usted también definitivamente quiere utilizar keyup caso también si quieres la validación cuando el usuario está escribiendo:

$(document).ready(function() { 
    $("#txtConfirmPassword").keyup(checkPasswordMatch); 
});

Here is a working example

Personalmente preferiría hacer el cheque cuando cualquiera de cambios en el campo de contraseña, De esta forma si se vuelva a escribir la contraseña original a continuación, sigue recibiendo la misma comprobación de validación:

$(document).ready(function() { 
    $("#txtNewPassword, #txtConfirmPassword").keyup(checkPasswordMatch); 
});

Here is a working example

Fuente

2012-03-15 10:12:33 musefan

+1 No tiene sentido cargar jQuery y evitar el uso de las características de manejo de eventos. –

@musefan ¡Muchas gracias! Sí, ¡resolvió este problema! – Igal

tienes que verificar el valor del pase como este ... si ($ (this) .val()! = $ ('# TxtNewPassword'). Val(). Substr (0, $ (this) .val(). Length)) ... porque si el usuario escribe la contraseña en ese momento también para mostrarla no coincide con – sandeep

$('#txtConfirmPassword').keyup(function(){ 


if($(this).val() != $('#txtNewPassword').val().substr(0,$(this).val().length)) 
{ 
alert('confirm password not match'); 
} 



});

Fuente

2012-03-15 10:13:48 sandeep

$(function() { 
    $("#txtConfirmPassword").keyup(function() { 
     var password = $("#txtNewPassword").val(); 
     $("#divCheckPasswordMatch").html(password == $(this).val() 
      ? "Passwords match." 
      : "Passwords do not match!" 
     ); 
    }); 
});

Demo here

Fuente

2012-03-15 10:14:15

+1 No tiene sentido cargar jQuery y seguir usando JavaScript en línea desde finales de los 90 :) –

@Salman Eso es interesante método, no estoy familiarizado con eso. ¿Dónde puedo leer más al respecto? ¡Gracias! – Igal

@Igal: ¿estás hablando del ['?:' El operador ternario de JavaScript] (http://stackoverflow.com/q/6259982/87015)? –

El problema en este caso es que onchange evento no se dispara hasta que la entrada pierde el foco, por lo que probablemente va a querer escuchar el keyup-evento en cambio, que se dispara en cada golpe de teclado.

Además, preferiría no usar inline-javascript, sino capturar el evento usando jQuery.

$("#txtConfirmPassword").keyup(checkPasswordMatch);

Fuente

2012-03-15 10:15:00

El evento onkeyup hace el "trabajo" como usted tiene la intención:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head><title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"><!-- 
function checkPasswordMatch() { 
    var password = $("#txtNewPassword").val(); 
    var confirmPassword = $("#txtConfirmPassword").val(); 

    if (password != confirmPassword) 
     $("#divCheckPasswordMatch").html("Passwords do not match!"); 
    else 
     $("#divCheckPasswordMatch").html("Passwords match."); 
} 
//--></script> 
</head> 
<body> 

<div class="td"> 
    <input type="password" id="txtNewPassword" /> 
</div> 
<div class="td"> 
    <input type="password" id="txtConfirmPassword" onkeyup="checkPasswordMatch();" /> 
</div> 
    <div class="registrationFormAlert" id="divCheckPasswordMatch"> 
</div> 

</body> 
</html>

Fuente

2012-03-15 10:19:22

Hmmm, sí, funcionó. Me pregunto cómo es que no funcionó la primera vez que lo intenté ... * scratchhead * ¡Gracias! – Igal

He aquí un trabajo jsFiddle

http://jsfiddle.net/dbwMY/

A tener en cuenta: caso

validar manejador boun d dentro del documento.listos función - de lo contrario no existirá cuando las entradas de la JS se carga
usando keyup

Al decir que, la validación es un problema resuelto existen marcos que implementan esta funcionalidad.

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

me gustaría sugerir el uso de uno de estos en lugar de reimplementar validación para cada aplicación que escribe.

Fuente

2012-03-15 10:23:13 reach4thelasers

¡Gracias! Verificará esta validación, se ve interesante y útil. – Igal

En la muestra original era type = "password". Tu muestra usa texto tipo. – Maxim

Este ejemplo no funciona. – Austin

Comprobación de la coincidencia de contraseña al escribir

Respuesta

Cuestiones relacionadas