javascript setCustomValidity doesn't work
Question
I am new to Javascript,I wanna check if the passwords typing two times are matched using Javascript. But it seems doesn't work:
<html>
<head>
<script>
function checkpasswd(){
var p1 = getElementById("password1");
var p2 = getElementById("password2");
if( p1.value != p2.value){
p2.setCustomValidity("passwd don't match");
}else{
p2.setCustomValidity("");
}
}
</script>
</head>
<body>
<form>
passwd:<input type="password" name="password1" id="password1">
confirm passwd:<input type="password" name="password2" id="password2" onchange="checkpasswd()">
</form>
</body>
</html>
3 answers
solution1
4 2016-04-19 13:47:19
Use document.getElementById() and use the right id :
function checkpasswd(){
var p1 = document.getElementById("password1");
var p2 = document.getElementById("password2");
if( p1.value != p2.value){
p2.setCustomValidity("passwd don't match");
}else{
p2.setCustomValidity("");
}
}
solution2
0 2016-04-19 13:50:57
i have edited your code
<html>
<head>
<script>
function checkpasswd(){
var p1 = document.getElementById("password1");
var p2 = document.getElementById("password2");
var result = document.getElementById("result");
if( p1.value != p2.value){
result.innerHTML = "passwd don't match";
p2.setCustomValidity("passwd don't match");
}else{
result.innerHTML = "passwd match";
p2.setCustomValidity("");
}
}
</script>
</head>
<body>
<form>
passwd:<input type="password" name="password1" id="password1">
confirm passwd:<input type="password" name="password2" id="password2" onkeyup="checkpasswd()">
</form>
<div id="result"></div>
</body>
</html>
solution3
0 2016-04-19 13:55:27
The id name u are using to find an element is misspelled. You need to mention the correct ID to get the element.
You forgot to use document object, and directly trying to access getElementById.
<html>
<head>
<script>
function checkpasswd(){
var p1 = document.getElementById("password1");
var p2 = document.getElementById("password2");
if( p1.value !== p2.value){
p2.setCustomValidity("passwd don't match");
}else{
p2.setCustomValidity("");
}
}
</script>
</head>
<body>
<form>
passwd:<input type="password" name="password1" id="password1">
confirm passwd:<input type="password" name="password2" id="password2" onchange="checkpasswd()">
</form>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript field.setCustomValidity() doesn't set field to valid
Javascript setCustomValidity does not work on Chrome Version 65
Regex validation in javascript with setCustomValidity
JavaScript - for loop not working with setCustomValidity
Javascript doesn't work on Android
setTimeout in JavaScript doesn't work
Javascript Objects doesn't work?
javascript redirect doesn't work
javascript getElementsByTagName doesn't work
javascript addEventListener doesn't work
Related Tags