Хочу сделать проверку формы на jQuery или JavaScript.
Вот сама форма:
<form id="create_account" action="registration_new.php" method="POST">
<fieldset id="singup">
<legend>Создайте новый аккаунт</legend>
<ul>
<li>
<label for="username"><i class="icon-user"></i>Логин:</label>
<input id="username" type="text" autofocus name="username" required placeholder="John" tabindex="1">
</li>
<li>
<label for="email"><i class="icon-envelope"></i>Email:</label>
<input id="email" type="text" name="email" placeholder="user@example.com" required autocomplete="off" tabindex="2">
</li>
<li>
<label for="password"><i class="icon-question-sign"></i>Пароль:</label>
<input id="password" type="password" name="password" value="" autocomplete="off" required placeholder="8-10 символов" tabindex="3">
</li>
<li>
<label for="password_confirm"><i class="icon-question-sign"></i>Повторите пароль:</label>
<input id="password_confirm" type="password" name="password_confirm" value="" required autocomplete="off" placeholder="Введите пароль еще раз" tabindex="4">
</li>
<li>
<button class="btn btn-primary" tabindex="5"><span><i class="icon-ok icon-white"></i></span>Зарегистрироваться</button>
</li>
</ul>
</fieldset>
</form>
Сейчас есть очень простая проверка на jQuery:
$(document).ready(function(){
$('#create_account:submit').click(function(e){
var allOk = true;
$(':text, :password').each(function(){
var stl = '2px solid ';
if($(this).val()) {
stl += 'green';
} else {
stl += 'red';
allOk = false;
}
$(this).css('border', stl);
});
!allOk && e.preventDefault();
});
});
Нужно сделать проверку email на валидность. И как можно сделать, чтобы ошибки отображались красиво рядом с полем формы, где произошла ошибка?
Инструмент
для валидации][1] - [Регулярное выражение дляE-Mail
][2] [1]: bit.ly/KCfsr7 [2]: bit.ly/KCfLCp