Валидация форм на заполнение
Добрый день! Возникла такая проблема! При проверке форм на заполнение не выдаются сообщения об ошибке при пустых полях после нажатия кнопки ОК. Спасибо!
HTML-код
<!doctype html>
<html>
<head>
<title>Валидация форм</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
p em {margin: 10px;}
#error1, #error2, #error3 {display: none;
color: #ff0000;
font-family: Arial;
font-variant: small-caps;}
</style>
<script src="valid.js" type="text/javascript">
</script>
</head>
<body>
<form>
<p><input type="text" size="12" maxlength="12" placeholder="Введите логин" id="text1"><em>Введите логин(не более 12 символов)<em></p>
<p id="error1"></p>
<p><input type="password" size="18" maxlength="12" placeholder="Введите пароль" id="text2"><em>Введите пароль(не более 12 символов)</em></p>
<p id="error2"></p>
<p><input type="password" size="18" maxlength="12" placeholder="Повторите пароль" id="text3"><em>Введите пароль еще раз</em></p>
<p id="error3"></p>
<input type="submit" value=" ОК ">
<input type="reset" value=" Сбросить ">
</form>
</body>
</html>
JAVASCRIPT :
var login;
var passw1;
var passw2;
var error1;
var error2;
var error3;
onload=function(){
login=document.getElementById("text1");
passw1=document.getElementById("text2");
passw2=document.getElementById("text3");
login.onsubmit=validateLogin;
passw1.onsubmit=validatePassword;
passw2.onsubmit=validatePassword;
error1=document.getElementById("error1");
error2=document.getElementById("error2");
error3=document.getElementById("error3");
}
function validateLogin(){
alert("start");
var loginValue=login.value;
if(loginValue==null||loginValue==""){
alert("stop");
error1.innerHTML="Вы не ввели логин";
error1.style.display="block";
return false;
}
}
function validatePassword (){
passw1Value=passw1.value;
passw2Value=passw2.value;
if(passw1Value==null||passw1Value==""){
error2.innerHTML="Вы не ввели пароль";
error2.style.display="block";
return false;
}
else if(passw2Value==null||passw2Value==""){
error3.innerHTML="Вы не ввели пароль повторно";
error3.style.display="block";
return false;
}
if(passw1Value!=passw2Value){
error3.innerHTML="Введенные пароли не совпадают";
error3.style.display="block";
return false;
}
}
|