Модифицированный скрипт проверки полей

@stimka · Регистрация: 01.05.2010

Студворк — интернет-сервис помощи студентам

Здравствуйте! Всегда работал с PHP и в сторону JS смотрел мало, если что, просто скачивал что то готовое, а тут на днях возникла "проблемка". Начальство попросило что бы было как в "вконтакте( по другому объяснить не могут" , что бы все происходило без обновления страницы ( ajax).

Необходимо сделать так:

Если человек проигнорировал поле "ответственный" а заполнил сразу "ответ" и "дату исполнения" то вызывало ошибку .. с последующей блокировкой кнопки... ну и так же если введет "дату исполнения" а поле ответ" оставит пустым"... т.е не логично так будет.

Копаюсь уже 4 дня и весь интернет перерыл, везде попадалась обычная валидация... а учить js и jquery нет времени, так как сдавать уже в пятницу.

Вся надежда на Вас.

Вот что у меня получилось, вот только не работает почему то.

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
31
32
33
34
35
36
37
38
$(function() {
    
    
    //Пароль
    $("#otvetstv").change(function(){
        otvetstv = $("#otvetstv").val();
            otvet = $("#otvet").val();
                dataisp = $("#dataisp").val();
        if(otvetstv.length == 0 && otvet.lenght > 1 || dataisp.lenght > 1 ){
            $("#otvetstv").next().hide().text("Вы должны выбрать ответственного").css("color","red").fadeIn(400);
            $("#otvetstv").removeClass().addClass("inputRed");
            otvetstvStat = 0;
            buttonOnAndOff();
        }else{
            $("#otvetstv").removeClass().addClass("inputGreen");
            $("#otvetstv").next().text("");
            otvetstvStat = 1;
            buttonOnAndOff();
        }       
    });
    $("#otvetstv").keyup(function(){
        $("#otvetstv").removeClass();
        $("#otvetstv").next().text("");
    });
    
 
    
    function buttonOnAndOff(){
        if(otvetstvStat == 1 ){
            $("#submit2").removeAttr("disabled");
        }else{
            $("#submit2").attr("disabled","disabled");
        }
    
    }
    
});
</script>

Хотя другой такой же скрипт, который так же стоит на странице, работает хорошо.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script type="text/javascript">
 
var login,
    email,
    password,
    loginStat,
    emailStat,
    passwordStat;
 
$(function() {
    //Логин
    $("#login").change(function(){
        login = $("#login").val();
        var expLogin = /^[a-zA-Z0-9_]+$/g;
        var resLogin = login.search(expLogin);
        if(resLogin == -1){
            $("#login").next().hide().text("Неверный логин").css("color","red").fadeIn(400);
            $("#login").removeClass().addClass("inputRed");
            loginStat = 0;
            buttonOnAndOff();
        }else{
            $.ajax({
            url: "testingLoginEmail.php",
            type: "GET",
            data: "login=" + login,
            cache: false,
            success: function(response){
                if(response == "no"){
                    $("#login").next().hide().text("Логин занят").css("color","red").fadeIn(400);
                    $("#login").removeClass().addClass("inputRed");                 
                }else{                  
                    $("#login").removeClass().addClass("inputGreen");
                    $("#login").next().text("");
                }           
                
            }
        });
            loginStat = 1;
            buttonOnAndOff();
        }
        
    });
    $("#login").keyup(function(){
        $("#login").removeClass();
        $("#login").next().text("");
    });
    
    // ФИО
        $("#email").change(function(){
        password = $("#email").val();
        if(password.length < 1){
            $("#email").next().hide().text("Введите фио").css("color","red").fadeIn(400);
            $("#email").removeClass().addClass("inputRed");
            emailStat = 0;
            buttonOnAndOff();
        }else{
            $("#email").removeClass().addClass("inputGreen");
            $("#email").next().text("");
            emailStat = 1;
            buttonOnAndOff();
        }       
    });
    $("#email").keyup(function(){
        $("#email").next().text("");
    });
    
    
    
    //Пароль
    $("#password").change(function(){
        password = $("#password").val();
        if(password.length < 6){
            $("#password").next().hide().text("Слишком короткий пароль").css("color","red").fadeIn(400);
            $("#password").removeClass().addClass("inputRed");
            passwordStat = 0;
            buttonOnAndOff();
        }else{
            $("#password").removeClass().addClass("inputGreen");
            $("#password").next().text("");
            passwordStat = 1;
            buttonOnAndOff();
        }       
    });
    $("#password").keyup(function(){
        $("#password").removeClass();
        $("#password").next().text("");
    });
    
    
    
    function buttonOnAndOff(){
        if(emailStat == 1 && passwordStat == 1){
            $("#submit").removeAttr("disabled");
        }else{
            $("#submit").attr("disabled","disabled");
        }
    
    }
    
});
</script>

Помогите пожалуйста, очень прошу.. а то голова скоро лопнет. =)

@Soldado · 13.02.2013, 23:36

Хорошо бы ещё html и стили
Переменные Вы объявили?

@stimka · 14.02.2013, 10:48 **[ТС]**

Извините, забыл добавить

HTML5
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 <?=lang('edit');?> заявки -№ "<?=$page_data['id'];?>" </div>
 <form action="admin.php?view=update&t=news&id=<?=$page_data['id'];?>" method="post" id="add-edit">
                      <div class="formSep">
                                    <label>Дата составления заявки</label>
                                    <input type="text"  name="data" class="input-small date-picker" value="<?=$page_data['data'];?>"/>
                                </div>
                                
                                <div class="formSep">
                                <input type="hidden" id="zipsearch-id" name="title" value="<?=$myrow['KodObjekta'];?>"/>
                                    <label>Наименование эксплуатационной организации</label>
                                    <input type="text" class="span6" id="zipsearch" value="<?=$myrow['NaimenovanijeObjekta'];?>"/>
                                </div>
                                </div>
                                <div class="formSep">
                                    <div class="row-fluid">
                                        <div class="span3">
                                        <input type="hidden" id="zipsearch-id2" name="dolzhnost" value="<?=$myrow2['Kod'];?> "/>
                                            <label>Должность обратившегося лица</label>
                                            <input type="text" class="span10" id="zipsearch2" value="<?=$myrow2['naimenovanie'];?>" />
                                        </div>
                                        <div class="span3">
                                            <label>Ф.И.О обратившегося лица</label>
                                            <input type="text" class="span10" name="fio" value="<?=$page_data['fio'];?>" />
                                        
                                        </div>
                                        <div class="span3">
                                            <label>Телефон</label>
                                            <input type="text" class="span10" name="tel_p" value="<?=$page_data['tel_p'];?>" />
                                        </div>
                                        <div class="span3">
                                            <label>Email</label>
                                            <input type="text" class="span10" name="email_p" value="<?=$page_data['email_p'];?>" />
                                    </div>
                                    
                                <div class="formSep">
                                    <div class="row-fluid">
                                        <div class="span6">
                                            <label>Дополнительная информация</label>
                                            <textarea name="kontakti" id="txtarea_reg" cols="10" rows="3"  ><?=$page_data['kontakti'];?></textarea>
                                        </div>
                                            </div>
                                                </div>
                                        
                                        <div class="formSep">
                                    <div class="row-fluid">
                                        <div class="span3">
                                        <input type="hidden" id="zipsearch-id3" name="izdelie" value="<?=$myrow3['kod'];?>"/>
                                            <label>Изделие</label>
                                            <input type="text" class="span10" id="zipsearch3" value="<?=$myrow3['nazvanie'];?>"/>
                                        </div>
                                        <div class="formSep">
                                    <div class="row-fluid">
                                        <div class="span3">
                                            <label>Исполнить до</label>
                                            <input type="text" class="input-small date-picker"  name="datavvoda"  value="<?=$page_data['datavvoda'];?>"/>
                                        </div>
                                        </div>
                                        <div class="formSep">
                                    <div class="row-fluid">
                                        <div class="span6">
                                            <label>Вопрос</label>
                                            <textarea name="vopros" id="txtarea_sp" cols="10" rows="3" class="span8"><?=$page_data['vopros'];?></textarea>
                                            </div>
                                            </div>
                                           <div class="formSep">
                                    <div class="row-fluid">
                                        <div class="span6">
                                         
                                            <label>Предварительный ответ</label>
                                            <textarea name="potvet" id="txtarea_sp" cols="10" rows="3" class="span8"><?=$page_data['potvet'];?></textarea>
                                            </div>
                                            </div>
                                          <div class="formSep">
                                          <label>Ответ</label>
                                            <textarea name="otvet" id="otvet" cols="10" rows="3" class="span8"><?=$page_data['otvet'];?></textarea>
                                            </div>
                                            </div>
                                          <div class="formSep">
                                    <div class="row-fluid">
                                        <div class="span3">
                                            <label>Ответственный</label>
                                            <input type="text" class="span10" name="otvetstv" id="otvetstv" value="<?=$page_data['otvetstv'];?>"/>
                                    
                                        
                                            <input type="hidden" class="span3" name="oformil" value="<?=$page_data['oformil'];?>"/>
                                            </div>
                                        
                                        </div>
                                            <label>Дата исполнения</label>
                                            <input type="text" class="input-small date-picker" name="dataisp" id="dataisp"  value="<?=$page_data['dataisp'];?>"/>
                                        </div>
                                    
                                        
                                        <br>
                                        <input type="hidden" name="status" value="onebit_06.png"/>
    <input type="hidden" name="title_url" value="<?=$page_data['title_url'];?>"/>
    <input type="submit" name="save" value="<?=lang('save');?>"  id="submit2" disabled class="btn btn-success" />

Стилей как таковых нет.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
<style>
.inputRed{
border:1px solid #ff4040;
background: #ffcece;
}
.inputGreen{
border:1px solid #83c954;
background: #e8ffce;
 
}
 
</style>

Добавлено через 10 часов 54 минуты
В общем убрал переменные в начале и заработало, но работает все равно не правильно.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<script type="text/javascript">
 
var 
    otvetstv,
    otvet,
    otvetstvStat;
 
$(function() {
    
    
    //ввод ответственого. Если поле ответ заполнено, а поле ответственный нет, то выводим ошибку
    $("#otvetstv").change(function(){
        otvetstv = $("#otvetstv").val();
            otvet = $("#otvet").val();
                dataisp = $("#dataisp").val();
        if(otvetstv.length < 0 && otvet.lenght > 1){
            $("#otvetstv").next().hide().text("Вы должны выбрать ответственного").css("color","red").fadeIn(400);
            $("#otvetstv").removeClass().addClass("inputRed");
            otvetstvStat = 0;
            buttonOnAndOff();
        }else{
            $("#otvetstv").removeClass().addClass("inputGreen");
            $("#otvetstv").next().text("");
            otvetstvStat = 1;
            buttonOnAndOff();
        }       
    });
    $("#otvetstv").keyup(function(){
        $("#otvetstv").removeClass();
        $("#otvetstv").next().text("");
    });
    
 
    
    function buttonOnAndOff(){
        if(otvetstvStat == 1 ){
            $("#submit2").removeAttr("disabled");
        }else{
            $("#submit2").attr("disabled","disabled");
        }
    
    }
    
});
</script>

Что otvetstv.length == 0 что otvetstv.length < 0 , результат все равно остается одинаковый.. Если ввожу что то в поле ответ, то результата нет.. а когда ввожу что то в поле ответственный, то оно становится зеленым и кнопка разблокируется. Странно.

Donald28 · 14.02.2013, 13:07

не уверен, но попробуй эту строчку

JavaScript
1
 if(otvetstv.length < 0 && otvet.lenght > 1){

переписать как

JavaScript
1
 if( (otvetstv.length < 0) && (otvet.lenght > 1)){

Добавлено через 5 минут
P.S.: Если у тебя только этот код написан, а тебе надо сделать отправку формы без перезагрузки страницы к завтрашнему дню. А еще тебе

Сообщение от stimka

а учить js и jquery нет времени

то ты просто не успеешь все сделать. Т.к. не написана еще ajax обработка формы и не исправлена php-код отправки запроса на почту

@stimka · 15.02.2013, 00:41 **[ТС]**

В общем сделал по другому, теперь у меня работает. ( отправка на почту не нужна )

Напишу что получилось.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script type="text/javascript">
 
var otvetstv,
    otvet,
    otvetstvStat,
    otvetStat;
 
$(function() {
    
    
    //ввод ответственого. Если поле ответ заполнено, а поле ответственный нет, то выводим ошибку
    $("#otvetstv").change(function(){
        otvetstv = $("#otvetstv").val();
        if(otvetstv.length < 2){
            $("#otvetstv").next().hide().text("Вы должны выбрать ответственного").css("color","red").fadeIn(400);
            $("#otvetstv").removeClass().addClass("inputRed");
            otvetstvStat = 0;
            buttonOnAndOff();
        }else{
            $("#otvetstv").removeClass().addClass("inputGreen");
            $("#otvetstv").next().text("");
            otvetstvStat = 1;
            buttonOnAndOff();
        }       
    });
    $("#otvetstv").keyup(function(){
        $("#otvetstv").removeClass();
        $("#otvetstv").next().text("");
    });
    
 
    $("#otvet").change(function(){
        if(otvet.length > 1 && otvetstv.length == 0){
            $("#otvet").next().hide().text("Вы не ввели ответственного").css("color","red").fadeIn(400);
            $("#otvet").removeClass().addClass("inputRed");
            otvetStat = 0;
            buttonOnAndOff();
        }else{
            $("#otvet").removeClass().addClass("inputGreen");
            $("#otvet").next().text("");
        }       
    });
    $("#otvet").keyup(function(){
        otvet = $("#otvet").val();
        if(otvet.length == 0 && otvetstv.length > 1 || otvet.length > 1 && otvetstv.length > 1 || otvetstv.length > 1 ){
            otvetStat = 1;
            buttonOnAndOff();
        }else{
            otvetStat = 0;
            buttonOnAndOff();
        }
    });
    
    function buttonOnAndOff(){
        if(otvetstvStat == 1 || otvetstvStat == 1 && otvetStat == 1 ){
            $("#submit2").removeAttr("disabled");
        }else{
            $("#submit2").attr("disabled","disabled");
        }
    
    }
    
});
</script>

Все работает, но есть одна проблема. К примеру я ввел ответственного... и сохранил страницу, после чего мне нужно её отредактировать и вставить ответ...

Но тут уже проблема.. пока я не обновлю поле ответственный, ничего работать не будет =((( и кнопка не появится..

Как исправить?кто нибудь знает?

Добавлено через 7 минут
Точнее, хотелось бы знать, как сделать что бы при загрузке формы проверять все это дело?

Добавлено через 9 часов 37 минут
Ребят, никто помочь не может?

Уже все события перепробовал, но ни одно не подходит... при загрузке страницы к примеру если поставить, то оно один раз срабатывает, а change, это придется изменять поле, остальные типа фокуса.. тоже не подходит. Можно ли сделать так, что если под фокусом одно поле, то автоматом срабатывает и другое?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	13.02.2013, 23:36
	Хорошо бы ещё html и стили Переменные Вы объявили? 1