Сделал форму регистрации (пока без отправки куда либо). Хочу сделать проверку на соответствие паролей(пароль:*****; повторите пароль:******), что бы оно выводило возле поля "повторите пароль" сообщение в случае если пароли не совпадают.
вот JS
if (window.addEventListener) window.addEventListener("load", init, false);
function init() {
for (var i = 0; i < document.forms.length; i++) {
var form = document.forms[i];
var formValidation = false;
for (var j = 0; j < form.elements.length; j++) {
var e = form.elements[j];
var pattern = e.getAttribute("data-val");
if (pattern) {
e.onkeyup = validateInput;
formValidation = true;
}
}
if (formValidation) {
form.onsubmit = validateForm;
}
}
}
function validateInput() {
var pattern = this.dataset.val,
msg = this.dataset.valMsg,
msgId = this.dataset.valMsgId,
value = this.value;
var res = value.search(pattern);
if (res == -1) {
document.getElementById(msgId).innerHTML = "<img src='bad.png'/>" + msg;
this.className = "error";
}
else {
document.getElementById(msgId).innerHTML = "<img src='ok.png'/>";
this.className = "valid";
}
}
function validateForm() {
var invalid = false;
for (var i = 0; i < this.elements.length; ++i) {
var e = this.elements[i];
if (e.type == "text", "password" && e.onkeyup != null) {
e.onkeyup();
if (e.className == "error") invalid = true;
}
}
if (invalid) {
alert("Допущены ошибки при заполнении формы.");
return false;
}
}
function pass() {
var pass1 = document.getElementById("pass1").value;
var pass2 = document.getElementById("pass2").value;
if (pass1 != pass2) {
alert("Пароли не совпадают");
}
}
Ну и HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Регалка</title>
<script type="text/javascript" src="script.js"></script>
<style>
.error {
background-color: Pink;
}
.valid {
background-color: LightGreen;
}
</style>
</head>
<body>
<form name="form1">
Имя <input type="text"
name="fname"
data-val="\S"
data-val-msg="Введите имя"
data-val-msg-id="fname" />
<span id="fname"></span> <br />
Фамилия <input type="text"
name="sname"
data-val="\S"
data-val-msg="Введите фамилию"
data-val-msg-id="sname" />
<span id="sname"></span><br />
Логин <input type="text"
name="login"
data-val="\S[A-Za-z0-9]"
data-val-msg="Введите логин"
data-val-msg-id="login" />
<span id="login"></span><br />
Пароль <input type="password"
name='pass1'
data-val="\S[A-Za-z0-9]{7,8}"
data-val-msg="Введите пароль(длинна пароля должна состоять не мение 8 символов)"
data-val-msg-id="pass1" />
<span id='pass1'></span>
<br />
Подтверждение пароля <input type="password"
value=""
name='pass2'
onblur="pass"
data-val="\S[A-Za-z0-9]"
data-val-msg="Пароли должны совпадать"
data-val-msg-id="pass2" />
<span id='pass2'></span>
<br />
Email <input type="text"
name="mail"
data-val="(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})"
data-val-msg="Введите email"
data-val-msg-id="mail" />
<span id="mail"></span><br />
Телефон <input type="text"
name="phone"
placeholder="067 123 45 67"
data-val="\d{3} \d{3} \d{2} \d{2}"
data-val-msg="Введите номер телефона"
data-val-msg-id="phone" />
<span id="phone"></span>
<br />Выберите ваш пол:<br />
<input type="radio" name="pol" checked="checked" />Женщина
<input type="radio" name="pol" />Мужчина
<br /><br />
<input type="reset" name="reset1" value="Заполнить заново" />
<input type="submit" value="Регистрация" />
</form>
</body>