He codificado un formulario HTML y necesito asegurarme de que un usuario ingrese una contraseña en el campo Contraseña y repita la misma contraseña en el campo Confirmar contraseña. Para asegurarme de que sean iguales, he usado una función de javascript para hacerlo posible. Además, he deshabilitado el botón Registrar y debo asegurarme de que solo esté habilitado si y solo si los valores ingresados en los dos cuadros de contraseña son iguales. Todo funciona bien, sin embargo, cuando los valores ingresados son iguales, el botón permanece deshabilitado y aún permanece una advertencia de que las contraseñas no coinciden.
A continuación se muestra el código:
function checkConfirmation() { var passcode = document.getElementById("password").value; var confirmPasscode = document.getElementById("confirmPassword").value; let btnSubmit = document.querySelector(".submit"); btnSubmit.disabled = true; if (passcode != confirmPasscode) { btnSubmit.disabled = true; document.getElementById("notEqualPassCode").innerHTML = '<i class="fa fa-fw fa-exclamation-triangle"></i>Passwords do not match!'; } else { btnSubmit.disabled = false; document.getElementById("notEqualPasscode").innerHTML = ''; } } <div class="form-group mb-3"> <label class="label" for="password">Password</label> <input id="password" type="password" class="form-control" placeholder="Password" name="passcode" required> <span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span> </div> <div class="form-group mb-3"> <label class="label" for="confirmPassword">Confirm Password</label> <input id="confirmPassword" type="password" class="form-control passcode" placeholder="Confirm Password" name="passCode" required onkeypress="checkConfirmation()"> <span toggle="#confirmPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span> </div> <span id="notEqualPassCode"></span>Por favor, que alguien me diga qué podría estar mal.
function check() { event.preventDefault(); form = document.getElementById('zero') pass = document.getElementById('one').value conf = document.getElementById('two').value if(pass == conf){ console.log("match") form.submit(); }else console.log('NO Match') } <form id='zero'> <input type='password' id='one'> <input type='password' id='two'> <input type='submit' onclick='check()' value='enter'> </form>primero, verifique si hay valores vacíos, no desea hacer coincidir valores vacíos.
luego, para su caso de uso, debe usar onkeyup porque desea verificar las entradas cuando el usuario suelta una tecla, no cuando el usuario presiona una tecla porque la tecla actual no se registrará.
function checkConfirmation() { var passcode = document.getElementById("password").value; var confirmPasscode = document.getElementById("confirmPassword").value; var notEqualPassCode = document.getElementById("notEqualPassCode"); let btnSubmit = document.querySelector(".submit"); if (passcode == '' || confirmPasscode == '' || passcode != confirmPasscode) { btnSubmit.disabled = true; notEqualPassCode.innerHTML = '<i class="fa fa-fw fa-exclamation-triangle"></i>Passwords do not match!'; } else { btnSubmit.disabled = false; notEqualPassCode.innerHTML = ''; } } <div class="form-group mb-3"> <label class="label" for="password">Password</label> <input id="password" type="password" class="form-control" placeholder="Password" name="passcode" required> <span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span> </div> <div class="form-group mb-3"> <label class="label" for="confirmPassword">Confirm Password</label> <input id="confirmPassword" type="password" class="form-control passcode" placeholder="Confirm Password" name="passCode" required onkeyup="checkConfirmation()"> <span toggle="#confirmPassword" class="fa fa-fw fa-eye field-icon toggle-password"></span> </div> <button class="submit" disabled="true">submit</button> <span id="notEqualPassCode"></span>