<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Проверка формы</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=windows-1251" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<style>
.inputRed{
border:1px solid #ff4040;
background: #ffcece;
}
.inputGreen{
border:1px solid #83c954;
background: #e8ffce;
}
</style>
<script type="text/javascript">
var login,
email,
password,
password2,
loginStat,
emailStat,
passwordStat,
password2Stat;
$(function() {
//Логин
$("#login").change(function(){
login = $("#login").val();
var expLogin = /^[a-zA-Z0-9_]+$/g;
var resLogin = login.search(expLogin);
if(resLogin == -1){
$("#login").next().hide().text("Неверный логин").css("color","red").fadeIn(400);
$("#login").removeClass().addClass("inputRed");
loginStat = 0;
buttonOnAndOff();
}else{
$.ajax({
url: "testingLoginEmail.php",
type: "GET",
data: "login=" + login,
cache: false,
success: function(response){
if(response == "no"){
$("#login").next().hide().text("Логин занят").css("color","red").fadeIn(400);
$("#login").removeClass().addClass("inputRed");
}else{
$("#login").removeClass().addClass("inputGreen");
$("#login").next().text("");
}
}
});
loginStat = 1;
buttonOnAndOff();
}
});
$("#login").keyup(function(){
$("#login").removeClass();
$("#login").next().text("");
});
// Email
$("#email").change(function(){
email = $("#email").val();
var expEmail = /[-0-9a-z_]+@[-0-9a-z_]+\.[a-z]{2,6}/i;
var resEmail = email.search(expEmail);
if(resEmail == -1){
$("#email").next().hide().text("Неверный формат Email").css("color","red").fadeIn(400);
$("#email").removeClass().addClass("inputRed");
emailStat = 0;
buttonOnAndOff();
}else{
$.ajax({
url: "testingLoginEmail.php",
type: "GET",
data: "email=" + email,
cache: false,
success: function(response){
if(response == "no"){
$("#email").next().hide().text("Email Занят").css("color","red").fadeIn(400);
$("#email").removeClass().addClass("inputRed");
}else{
$("#email").removeClass().addClass("inputGreen");
$("#email").next().text("");
}
}
});
emailStat = 1;
buttonOnAndOff();
}
});
$("#email").keyup(function(){
$("#email").removeClass();
$("#email").next().text("");
});
//Пароль
$("#password").change(function(){
password = $("#password").val();
if(password.length < 6){
$("#password").next().hide().text("Слишком короткий пароль").css("color","red").fadeIn(400);
$("#password").removeClass().addClass("inputRed");
passwordStat = 0;
buttonOnAndOff();
}else{
$("#password").removeClass().addClass("inputGreen");
$("#password").next().text("");
passwordStat = 1;
buttonOnAndOff();
}
});
$("#password").keyup(function(){
$("#password").removeClass();
$("#password").next().text("");
});
//Проверка пароля
$("#password2").change(function(){
if(password2 != password){
$("#password2").next().hide().text("Пароли не совпадают").css("color","red").fadeIn(400);
$("#password2").removeClass().addClass("inputRed");
password2Stat = 0;
buttonOnAndOff();
}else{
$("#password2").removeClass().addClass("inputGreen");
$("#password2").next().text("");
}
});
$("#password2").keyup(function(){
password2 = $("#password2").val();
if(password2 == password){
password2Stat = 1;
buttonOnAndOff();
}else{
password2Stat = 0;
buttonOnAndOff();
}
});
function buttonOnAndOff(){
if(emailStat == 1 && passwordStat == 1 && password2Stat == 1 && loginStat == 1){
$("#submit").removeAttr("disabled");
}else{
$("#submit").attr("disabled","disabled");
}
}
});
</script>
</head>
<body>
<form action="#" method="post">
<label><font color='red'>*</font> Ваш Логин:<br></label>
<input name="login" type="text" size="50" id="login"> <span></span><br>
<label><font color='red'>*</font> Ваш E-mail:<br></label>
<input name="email" type="text" size="50" id="email"> <span></span><br>
<label><font color='red'>*</font> Ваш пароль:<br></label>
<input name="password" type="password" size="50" id="password"> <span></span><br>
<small>Не менее 6 символов</small>
<label><font color='red'>*</font> Подтвердите пароль:<br></label>
<input name="password2" type="password" size="50" id="password2"> <span></span><br><br>
<input type="submit" name="submit" value="Зарегистрироваться" id="submit" disabled><br><br>
<font color='red'>*</font> поля, обязательные для заполнения.
</form>
</body>
</html>