| |
|
|
| | Всем доброго вечера!
Столкнулся с проблемой привязки своего скрипта в готовый скрипт валидации форм на JQuery.
Необходимо сделать так, чтобы мой код отображения анимации загрузки срабатывал в том случае, когда нет не одного сообщения "message" об ошибке. Не знаю как и к чему его привязать, пробовал разные варианты, но ни один не работает так как нужно!
Вот сам код валидации:
$(document).ready(function(){
$("form").validate({
rules:{
gorod:
{
required: true,
},
user:
{
required: true,
minlength: 2,
maxlength: 40,
},
e_mail:
{
required: true,
email: true,
maxlength: 40,
},
zagolovok:
{
required: true,
minlength: 10,
maxlength: 60,
},
text_obyavl:
{
required: true,
minlength: 20,
maxlength: 2000,
},
},
messages:{
gorod:
{
required: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Это поле обязательное для заполнения!</div>"
},
user:
{
required: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Это поле обязательное для заполнения!</div>",
minlength: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Контактное лицо: не менее 2 символов!</div>",
maxlength: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Контактное лицо: не более 40 символов!</div>",
},
e_mail:
{
required: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Это поле обязательное для заполнения!</div>",
maxlength: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>E_mail: не более 40 символов!</div>",
email: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Не верный формат E-mail адреса!</div>",
},
zagolovok:
{
required: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Это поле обязательное для заполнения!</div>",
minlength: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Заголовок: не менее 10 символов!</div>",
maxlength: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Заголовок: не более 60 символов!</div>",
},
text_obyavl:
{
required: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Это поле обязательное для заполнения!</div>",
minlength: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Текст объявления: не менее 20 символов!</div>",
maxlength: "<div style='font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; font-size: 10px;'>Текст объявления: не более 2000 символов!</div>",
},
},
success:
// моя функция
function(){
var background = $('<div>').css({'backgroundColor' : '#000', 'width' : '100%', 'height' : '100%', 'position' : 'fixed', 'z-index' : '9', 'top' : '0', 'left' : '0', 'opacity' : '0.6'});
var image = $('<img>').attr({'src': '../image/zagruzka.gif'});
var text = $('<span>').text('Дождитесь завершения загрузки!').css({'font-family': 'Verdana, Arial, Helvetica, sans-serif', 'font-weight': 'bold', 'font-size': '16px', 'color': '#FFFFFF'});
var loading = $('<div>').css({'z-index' : '10', 'position' : 'fixed', 'top' : '40%', 'left' : '45%', 'margin' : '-64px 0 0 -64px', 'text-align': 'center'})
.html(image).append('<br><br>').append(text);
$('#submit').click(function(){
if (....не знаю как задать условие, чтобы функция срабатывала только при отсутствии каких либо ошибок валидации формы.....) {$('body').prepend(loading).prepend(background);}
});
// моя функция
},
});
});
|
| |
| |
|
|
| |
|
|
| |
для: segazav
(24.09.2014 в 18:03)
| | | Мне плохо. Откройте форточку...
Через час буду дома - напишу, если никто не ответит. | |
| |
|
|
| |
|
|
| |
для: Deed
(24.09.2014 в 19:00)
| | | Ну а все таки.... | |
| |
|
|
| |
|
|
| |
для: segazav
(24.09.2014 в 19:47)
| | | easy example:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>VF</title>
<style type="text/css">
.error_span{
color:red;
font-weight:600;
margin-left: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$('span.error_span').remove();
var nm = $('#name').val();
var ml = $('#soap').val();
var st = $('#sity').val();
if(!/[\wа-яё]{2,40}/i.test(nm)){
alarm($('#name'));
return false;
}
else if(!/[\w-]+?@[a-z][\w]+?\.[a-z]{2,6}/i.test(ml)){
alarm($('#soap'));
return false;
}
else if(!/[а-яё-]+(\s[а-яё-])?|[a-z-]+/i.test(st)){
alarm($('#sity'));
return false;
}
else{
//Do our AJAX
}
});
});
function alarm(b){
$('<span class="error_span">Bad!</span>').insertAfter(b).fadeOut(5000);
}
</script>
<form>
<span>Name:</span>
<input type="text" id="name" maxlength=40 /><br>
<span>Email:</span>
<input type="email" id="soap" maxlength=40 /><br>
<span>Sity:</span>
<input type="text" id="sity" maxlength=40 />
</form><br><br>
<button id="sf">Send!</button>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Deed
(24.09.2014 в 21:05)
| | | Что то я не совсем понял...
К сожалению, я плохо разбираюсь в JS, поэтому и обратился за помощью. | |
| |
|
|
| |
|
|
| |
для: segazav
(24.09.2014 в 22:20)
| | |
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>VF</title>
<style type="text/css">
.error_span{
color:red;
font-weight:600;
margin-left: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){ //по клику на кнопке
$('span.error_span').remove(); //удаляем прежние сообщения об ошибках (если они есть)
var nm = $('#name').val(); // получаем значение поля "Имя"
var ml = $('#soap').val(); // ---- // ---- // ---- "мыло"
var st = $('#sity').val(); // ------------ // ------------- название города и т.д.
if(!/[\wа-яё]{2,40}/i.test(nm)){ // теперь проверяем полученное "Имя" на длину и "кривые" символы
alarm($('#name')); // если такие символы найдены или поле пустое, выводим надпись "Bad!" и останавливаем дальнейшие действия
return false;
}
else if(!/[\w-]+?@[a-z][\w]+?\.[a-z]{2,6}/i.test(ml)){ // то же самое с "мылом"
alarm($('#soap'));
return false;
}
else if(!/[а-яё-]+(\s[а-яё-]+)?|[a-z-]+/i.test(st)){ // то же - с названием города
alarm($('#sity'));
return false;
}
else{ //НО ЕСЛИ поля заполнены нормально, выполняем все, что у нас запланировано с AJAX.
//Do our AJAX
}
});
});
function alarm(b){ //функция, которая выводит сообщение о некорректном заполнении поля
$('<span class="error_span">Bad!</span>').insertAfter(b).fadeOut(5000);
}
</script>
<form>
<span>Name:</span>
<input type="text" id="name" maxlength=40 /><br>
<span>Email:</span>
<input type="email" id="soap" maxlength=40 /><br>
<span>Sity:</span>
<input type="text" id="sity" maxlength=40 />
</form><br><br>
<button id="sf">Send!</button>
</body>
</html>
|
В этом примере регулярки упрощены, а поля приведены как примерные. | |
| |
|
|
| |
|
|
| |
для: Deed
(24.09.2014 в 22:42)
| | | Я не могу понять, что конкретно мне использовать вместо "НО ЕСЛИ поля заполнены нормально..." из вашего примера.
Я уже просмотрел документацию к плагину [url]http://jqueryvalidation.org/category/plugin/
[/url], но так ничего и не придумал.
Пробовал сделать так:
$('#submit').click(function(){
if ($('form').validate().errorList.length == 0) {$('body').prepend(loading).prepend(background);}
});
но почему то срабатывает, когда хотя бы одно поле верное, а должно срабатывать когда все поля верные. | |
| |
|
|
| |
|
|
| |
для: segazav
(25.09.2014 в 00:05)
| | | Да зачем вам этот плагин??
В примере, который я привел, отправка данных формы не будет осуществлена, если хоть какое-то поле заполнено неправильно.
Если же все ОК, тогда вместо "//Do our AJAX" мы прописываем отправку данных на сервер.
Например, наш php-обработчик на сервере - это файл form_val.php.
Тогда:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>VF</title>
<style type="text/css">
.error_span{
color:red;
font-weight:600;
margin-left: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){ //по клику на кнопке
$('span.error_span').remove(); //удаляем прежние сообщения об ошибках (если они есть)
var nm = $('#name').val(); // получаем значение поля "Имя"
var ml = $('#soap').val(); // ---- // ---- // ---- "мыло"
var st = $('#sity').val(); // ------------ // ------------- название города и т.д.
if(!/[\wа-яё]{2,40}/i.test(nm)){ // теперь проверяем полученное "Имя" на длину и "кривые" символы
alarm($('#name')); // если такие символы найдены или поле пустое, выводим надпись "Bad!" и останавливаем дальнейшие действия
return false;
}
else if(!/[\w-]+?@[a-z][\w]+?\.[a-z]{2,6}/i.test(ml)){ // то же самое с "мылом"
alarm($('#soap'));
return false;
}
else if(!/[а-яё-]+(\s[а-яё-]+)?|[a-z-]+/i.test(st)){ // то же - с названием города
alarm($('#sity'));
return false;
}
else{ //НО ЕСЛИ поля заполнены нормально, выполняем все, что у нас запланировано с AJAX.
var datas={user_name:nm,user_mail:ml,user_sity:st}; //формируем массив введенных в форму данных, user_name, user_mail... - это то, что получит файл form_val.php в переменных $_POST['user_name'],$_POST['user_mail']...
function success(r){ //пишем функцию, которая будет проверять ОТВЕТ файла form_val.php (допустим, если проверка данных на сервере прошла нормально, form_val.php возвращает echo "ok"; если же возникли проблемы - echo "bad'). И этот ответ записывается в переменную "r" - в аргумент функции "success".
if(r==='ok'){ // все в порядке
// делаем то, что нужно
}
else{
// выводим сообщение об ошибке
}
$.post('../form_val.php',datas,success,'text'); //отправляем запрос с данными (datas) на сервер файлу form_val.php, после ответа выполняем функцию success, а сам ответ ждем в формате text.
}
}
});
});
function alarm(b){ //функция, которая выводит сообщение о некорректном заполнении поля
$('<span class="error_span">Bad!</span>').insertAfter(b).fadeOut(5000);
}
</script>
<form>
<span>Name:</span>
<input type="text" id="name" maxlength=40 /><br>
<span>Email:</span>
<input type="email" id="soap" maxlength=40 /><br>
<span>Sity:</span>
<input type="text" id="sity" maxlength=40 />
</form><br><br>
<button id="sf">Send!</button>
</body>
</html>
|
Вот и все. | |
| |
|
|
| |
|
|
| |
для: Deed
(25.09.2014 в 07:11)
| | | Я не пойму, как это все реализовать в моём примере?
Нужно чтобы срабатывала моя функция лишь в случае когда все поля формы заполнены верно и
форма отправлялась стандартным методом (Ajax мне не нужен).
Добавил конструкцию submitHandler. Да, теперь срабатывает если все верно, но только кода первый раз кликаешь по кнопке submit вообще ничего не происходит.
При втором клике моя функция срабатывает, а форма не отправляется.
Почему так? Что нужно подправить?
submitHandler: function() {
var background = $('<div>').css({'backgroundColor' : '#000', 'width' : '100%', 'height' : '100%', 'position' : 'fixed', 'z-index' : '9', 'top' : '0', 'left' : '0', 'opacity' : '0.6'});
var image = $('<img>').attr({'src': '../image/zagruzka.gif'});
var text = $('<span>').text('Дождитесь завершения загрузки!').css({'font-family': 'Verdana, Arial, Helvetica, sans-serif', 'font-weight': 'bold', 'font-size': '16px', 'color': '#FFFFFF'});
var loading = $('<div>').css({'z-index' : '10', 'position' : 'fixed', 'top' : '40%', 'left' : '45%', 'margin' : '-64px 0 0 -64px', 'text-align': 'center'})
.html(image).append('<br><br>').append(text);
$('#submit').click(function(){
$('body').prepend(loading).prepend(background);
});
} | |
| |
|
|
| |
|
|
| |
для: segazav
(25.09.2014 в 11:48)
| | | Тогда все еще проще:
вместо
else{ //НО ЕСЛИ поля заполнены нормально, выполняем все, что у нас запланировано с AJAX.
var datas={user_name:nm,user_mail:ml,user_sity:st}; //формируем массив введенных в форму данных, user_name, user_mail... - это то, что получит файл form_val.php в переменных $_POST['user_name'],$_POST['user_mail']...
function success(r){ //пишем функцию, которая будет проверять ОТВЕТ файла form_val.php (допустим, если проверка данных на сервере прошла нормально, form_val.php возвращает echo "ok"; если же возникли проблемы - echo "bad'). И этот ответ записывается в переменную "r" - в аргумент функции "success".
if(r==='ok'){ // все в порядке
// делаем то, что нужно
}
else{
// выводим сообщение об ошибке
}
$.post('../form_val.php',datas,success,'text'); //отправляем запрос с данными (datas) на сервер файлу form_val.php, после ответа выполняем функцию success, а сам ответ ждем в формате text.
}
}
|
Пишем:
else{ //НО ЕСЛИ поля заполнены нормально, отправляем данные стандартным методом:
$('form').submit();
}
|
И при этом наша форма должна иметь атрибут экшн:
<form action="handler.php">
|
где handler.php - наш серверный обработчик.
P.S. Тот "плагин", с которым вы пытаетесь разобраться - кошмарен. | |
| |
|
|
| |
|
|
| |
для: Deed
(25.09.2014 в 14:12)
| | | Спасибо за помощь, буду пробовать...
А почему вы считаете, что данный плагин кошмарен? | |
| |
|
|
| |
|
|
| |
для: segazav
(25.09.2014 в 14:17)
| | | Ну, как бы объяснить... Короче, чтобы забить гвоздь, гидравлический пресс не нужен, достаточно молотка. | |
| |
|
|
|
