Шалом всем кто чтет!
Решил поиграть с валидацией форм.
Почитал интернеты, пописал, получилось вот что:
http://lab.mizter.ru/form.html
Все супер пупер работает и меня это вполне даже устраивает.
Но все таки он не совершенен)))
Вот код:
$(document).ready(function () {
$("#pass_in").val(pass_in).hide();
$("#pass_confirm").val(pass_confirm).hide();
$(".registerForm").keyup(function() {
var pwd_in = $("#pwd_in").val();
var pwd_confirm = $("#pwd_confirm").val();
var pass_in = $("#pass_in").val();
var pass_confirm = $("#pass_confirm").val();
if(pwd_in != pwd_confirm || pwd_in == "" || pwd_confirm == "" || pass_in != pass_confirm || pass_in == "" || pass_confirm == "") {
$("#pwd_in").addClass("invalid").removeClass("valid");
$("#pwd_confirm").addClass("invalid").removeClass("valid");
$("#pass_in").addClass("invalid").removeClass("valid");
$("#pass_confirm").addClass("invalid").removeClass("valid");
} else if (pwd_in == pwd_confirm || pwd_in != "" || pwd_confirm != "" || pass_in == pass_confirm || pass_in != "" || pass_confirm != "") {
$("#pwd_in").addClass("valid").removeClass("invalid");
$("#pwd_confirm").addClass("valid").removeClass("invalid");
$("#pass_in").addClass("valid").removeClass("invalid");
$("#pass_confirm").addClass("valid").removeClass("invalid");
}
}).keyup();
$(".showORhide").click(function() {
var pwd_in = $("#pwd_in").val();
var pwd_confirm = $("#pwd_confirm").val();
var pass_in = $("#pass_in").val();
var pass_confirm = $("#pass_confirm").val();
if ($("#pwd_in").is(":visible") && $("#pwd_confirm").is(":visible")) {
$("#pwd_in").val(pass_in).hide();
$("#pwd_confirm").val(pass_confirm).hide();
$("#pass_in").val(pwd_in).show();
$("#pass_confirm").val(pwd_confirm).show();
} else {
$("#pass_in").val(pwd_in).hide();
$("#pass_confirm").val(pwd_confirm).hide();
$("#pwd_in").val(pass_in).show();
$("#pwd_confirm").val(pass_confirm).show();
}
});
});
Ради интереса и большего совершенства захотел прописать минимальную длину пароля, скажем 4 или 6 символов, вдруг кто потом в сети найдет этот код и будет использовать, лично для меня пароль из одной буквы или какого нибудь символа вполне приемлем.
Пробовал и pwd_in.length >= 6 и pwd_in.length >= pwd_in.attr("minlength") и кучу всего. Но увы, результата не получил.
Вот html:
<form method="post" name="bform" class="registerForm">
<input type="hidden" name="TYPE" value="REGISTRATION">
<h2>Регистрация</h2>
<label for="USER_NAME">Ваше имя:</label>
<input type="text" name="USER_NAME" pattern="[A-Za-zА-Яа-яЁё]{2,30}" maxlength="30" value="" placeholder="Имя" required>
<label for="USER_LAST_NAME">Ваша фамилия:</label>
<input type="text" name="USER_LAST_NAME" pattern="[A-Za-zА-Яа-яЁё]{2,30}" maxlength="30" value="" placeholder="Фамилия" required>
<label for="USER_LOGIN">Придумайте логин:</label>
<input type="text" name="USER_LOGIN" pattern="[A-Za-zА-Яа-яЁё-0-9]{2,30}" maxlength="30" value="" placeholder="Логин" required>
<label for="USER_PASSWORD">Придумайте пароль:</label>
<input type="password" name="USER_PASSWORD" id="pwd_in" pattern="[A-Za-zА-Яа-яЁё-0-9]{6,30}" maxlength="30" minlength="6" value="" placeholder="Пароль" required>
<input type="text" name="USER_PASSWORD" id="pass_in" pattern="[A-Za-zА-Яа-яЁё-0-9]{6,30}" maxlength="30" minlength="6" value="" placeholder="Пароль" required><p><a href="#" class="showORhide">показать</a></p>
<label for="USER_CONFIRM_PASSWORD">Повторите, чтобы не ошибиться:</label>
<input type="password" name="USER_CONFIRM_PASSWORD" id="pwd_confirm" pattern="[A-Za-zА-Яа-яЁё-0-9]{6,30}" maxlength="30" minlength="6" value="" placeholder="Повтор пароля" required>
<input type="text" name="USER_CONFIRM_PASSWORD" id="pass_confirm" pattern="[A-Za-zА-Яа-яЁё-0-9]{6,30}" maxlength="30" minlength="6" value="" placeholder="Повтор пароля" required>
<label for="USER_EMAIL">Ваша электронная почта:</label>
<input type="email" name="USER_EMAIL" pattern="[A-Za-z0-9]{1,30}@[A-Za-z0-9]{2,30}.[A-Za-z]{2,6}" maxlength="30" value="" placeholder="Электронная почта" required>
<textarea placeholder="Ваши дополнительные коментарии" required></textarea>
<input type="submit" name="Register" value="Регистрация">
</form>
Гуру и не гуру, все те у кого мозгов больше чем у меня, посмотрите внимательно на мое говно–творение и напишите пожалуйста что и куда вставить, чтобы можно было поставить минимальную длину пароля.
