|
| |
|
|
| |
для: segazav
(25.09.2014 в 14:17)
| | | Ну, как бы объяснить... Короче, чтобы забить гвоздь, гидравлический пресс не нужен, достаточно молотка. | |
| |
|
|
| |
|
|
| |
для: Deed
(25.09.2014 в 14:12)
| | | Спасибо за помощь, буду пробовать...
А почему вы считаете, что данный плагин кошмарен? | |
| |
|
|
| |
|
|
| |
для: 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 в 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 в 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
(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
(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 в 21:05)
| | | Что то я не совсем понял...
К сожалению, я плохо разбираюсь в JS, поэтому и обратился за помощью. | |
| |
|
|
| |
|
|
| |
для: 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 в 19:00)
| | | Ну а все таки.... | |
| |
|
| |
|
