Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 08.07.2013
Сообщений: 17
1

Нужен пример jquery формы c валидацией полей

06.08.2013, 11:10. Показов 881. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Всем привет! Только начал изучать jQuery и сразу столкнулся с трудностями реализации!
Нужно обработать форму типа:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="output"></div>
<div id="theForm">
<form action="" id="form" method="post" >
     <label>Registrator Name
    <span class="small">Your name</span>
    </label>
     <input type="text" name="rgName" id="rgName" />
    <label>Location
    <span class="small">Title of the location</span>
    </label>
       <input type="text" name="mName" id="mName" />
    <label>File
    <span class="small">Choose a File</span>
    </label>
        <input type="file" name="mFile" id="mFile" />
    <button type="submit" class="red-button" id="uploadButton">Upload</button>
    <button type="reset" class="red-button" id="resetButton">Reset</button>
    <div class="spacer"></div>
</form>
</div>
на предмет валидности полей перед выполнением submit, затем вывести нечто вроде summary page, при этом зааплодить файл в нужную локальную папку. Поделитесь рабочим примером. У самого не хочет запускаться,использую такой скрипт:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function()
{
    $('#form').validate(
        {    debug: true,
            //Правила
            rules:{
                "mName":{ required:true, maxlength:40, rangelength: [5, 20] },
                "rgName":{ required:true, number: true },
                "mFile":{ required:true }
            },
            //Текста предупреждений
            messages:{
                "mName":{ required:"<br/><span style='color:red;'>Обязательное поле!</a>", 
maxlength: "<br/><span style='color:red;'>Максимальное кол-во символов 40 единиц!</a>" },
                "rgName":{ required:"<br/><span style='color:red;'>Обязательное поле!</a>" },
                "mFile":{ required:"<br/><span style='color:red;'>Обязательное поле!</a>" },
            },
 
   
                        //Обработчик и отправка данных
            submitHandler:function(form){
                $(form).ajaxSubmit({
                    target: '#output', 
                    success: function() { 
                        $('#TheForm').slideUp('fast'); 
                    } 
                }); 
            }
    
});
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.08.2013, 11:10
Ответы с готовыми решениями:

Подгрузка полей формы, без перезагрузки с помощью jQuery
Ситуация следующая. Ранее ситуация была следующей: &lt;div&gt; &lt;select id='main_select'...

Проблемы с валидацией формы в Safari и IE
Проблема с отображением валидации в Safari и конечно же IE. Все остальные дружно проверяют поля на...

Trim инпутов формы перед валидацией
Есть форма с текстовым полем с атрибутом required. При отправке использую нативную валидацию, но...

Нужен пример кода как получить данные из текстовых полей HTML страницы
Кто-нибудь может привести пример кода как получить данные из текстовых полей HTML страницы. Т.е. я...

3
562 / 339 / 87
Регистрация: 15.05.2013
Сообщений: 812
Записей в блоге: 1
06.08.2013, 11:29 2
Я недавно проверял таким вот способом
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
    $('input').on('blur', function() {
 
        var name = $('input[name=name]').val();
        var address = $('input[name=address]').val();
        var error = false;
 
        if(name.length() == 0) {
            $('.name-error').fadeIn(500);
            error = true;
        } else {
            $('.name-error').fadeOut(300);
        }
 
        if (error == false) {
            $.post('/path/to/file', {param1: 'value1'}, function(data, textStatus, xhr) {
                //optional stuff to do after success
            });
        };
    });;
});
Уж не знаю на сколько правильным сочтут это ребята, но мне он пришелся по душе.
Для проверки email можно воспользоваться регуляркой.)
0
0 / 0 / 0
Регистрация: 08.07.2013
Сообщений: 17
06.08.2013, 15:06  [ТС] 3
Спасибо! я использовал jquery.validate.js
Дополнительный вопрос: что нужно сделать, чтобы результат из формы попадал в php файл, там обрабатывался и результат обработки выводился на той же странице в другой DIV? Подозреваю что нужно сделать изменения в функции с submitHandler: и в action формы добавить путь к phpфайлу, но после submit события идет пересылка на страницу с этим php-файлом.
0
632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632
07.08.2013, 19:07 4
Читайте про Ajax.http://javascript.ru/ajax

http://jquery.page2page.ru/index.php5/Ajax
0
07.08.2013, 19:07
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
07.08.2013, 19:07
Помогаю со студенческими работами здесь

Нужен пример чтения БД и заполнения формы
У кого есть пример, поделитесь плиз. Нужен пример чтения записи из БД и заполнения формы с...

Нужен пример взаимодействия формы с обращением к функции
как по кнопке в форме запустить функцию. нужен пример такой программы чтобы посмотреть как...

Сброс значения полей со списком и простых полей при закрытии формы
Всем привет, подскажите как при закрытии формы сделать так, чтобы набранные записи в текстовых...

Размножение полей формы - увеличить количество полей
Есть известный код (дабы не писать длиннющий код - дам ссылку) ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru