I created a function to indicate when the input passwords do not match, but having issues with showing the built-in HTML form verification message.
When I run the debugger I do see that the custom message gets displayed, but when the function ends so those the message.
Would anyone know why the message won't persist?
function validatePassword() {
debugger;
let p1 = document.getElementById('password');
let p2 = document.getElementById('confirm_password');
p2.setCustomValidity("");
if (p1.value != p2.value && p1.value != '' && p2.value != '') {
p2.setCustomValidity("Passwords do not match");
p2.reportValidity();
}
}<form>
<div>
<label for="">Password</label>
<input type="password" id='password' onchange='validatePassword()' required>
</div>
<br>
<div>
<label for="">Confirm Password</label>
<input type="password" id='confirm_password' onchange='validatePassword()' required>
</div>
<br>
<input type="submit" value="Send">
</form>