Здравствуйте. Есть форма, состоящая из 2 частей. В первой части пользователь вводит свои данные (имя, почту, мобилу) и при нажатии на кнопку отправить происходит скрытие первой части формы и появление второй части, в которой есть одно поле и уже реальная кнопка отправить.
Скрытие и появление частей формы выполнено таким скриптом:
<script type='text/javascript'>
$(document).ready(function() {
$("A#trigger").toggle(function() {
// Отображаем скрытый блок
$("DIV#box2").fadeIn(); // fadeIn - плавное появление
$("DIV#box1").fadeOut(); // fadeOut - плавное исчезновение
return false; // не производить переход по ссылке
},
function() {
// Скрываем блок
$("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение
$("DIV#box1").fadeIn(); // fadeIn - плавное появление
return false; // не производить переход по ссылке
}); // end of toggle()
}); // end of ready()
</script>
Подскажите как мне реализовать простейшую валидацию формы. Мысль есть такая - при нажатии на кнопку отправить в первой части формы происходит проверка поля email и name и если они заполнены неверно не происходит скрытие первого блока и отображение второго. ну и какой-нибудь простенький вывод об ошибке.
Пытаюсь такой скрипт прикрутить, не получается:
function validate(autoform,email) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.forms[autoform].elements[email].value;
if(reg.test(address) == false) {
$("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение
$("DIV#box1").fadeIn(); // fadeIn - плавное появление
alert('Введите корректный e-mail');
return false;
}
}
То есть делаю так:
<script type='text/javascript'>
$(document).ready(function() {
$("A#trigger").toggle(function() {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var address = document.forms[autoform].elements[email].value;
if(reg.test(address) == false) {
alert('Введите корректный e-mail');
return false;
}
else {
// Отображаем скрытый блок
$("DIV#box2").fadeIn(); // fadeIn - плавное появление
$("DIV#box1").fadeOut(); // fadeOut - плавное исчезновение
return false; // не производить переход по ссылке
},
function() {
// Скрываем блок
$("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение
$("DIV#box1").fadeIn(); // fadeIn - плавное появление
return false; // не производить переход по ссылке
}); // end of toggle()
}); // end of ready()
</script>
UPD: Добавляю код формы
<form autocomplete="off" method="post" id="autoform" action="/send.php">
<div id="box1">
<div class="form-group">
<input type="text" name="name" class="form-control" value="" placeholder="Ваше имя">
</div>
<div class="form-group">
<input type="text" name="email" id="email" class="form-control" value="" placeholder="Ваш email">
</div>
<div class="form-group">
<input type="text" name="phone" class="form-control" value="" placeholder="Ваш телефон">
</div>
<a href='#' id='trigger' class='btn btn-danger'>Отправить</a>
</div>
<div id='box2' style='display: none;'>
<div class="form-group">
<input type="text" name="ids" value="">
</div></div>
<button type="submit" class='btn btn-danger'>Отправить</button>
</div>
</form>
Исправил функцию так:
<script type='text/javascript'>
$(document).ready(function() {
$("A#trigger").toggle(function() {
// Отображаем скрытый блок
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var email = document.getElementById("email").value;
if(reg.test(email) == false) {
alert('Вы ввели не корректный E-Mail!');
}
else {
$("DIV#box1").fadeOut();
$("DIV#box2").fadeIn();
}
},
function() {
// Скрываем блок
$("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение
$("DIV#box1").fadeIn(); // fadeIn - плавное появление
return false; // не производить переход по ссылке
}); // end of toggle()
}); // end of ready()
</script>
Все вроде бы правильно работает. НО! После того, как ввел неправильно вылезает alert я его закрываю, правлю email, чтобы был правильным и кнопка отправить работает со второго нажатия. Почему?