Форма на ajax

@nepster · Регистрация: 19.09.2009

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

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
<script type="text/javascript">
 
 
function checkUsernameForLength(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 5) {
        fieldset.className = "welldone";
    }
    else {
        fieldset.className = "";
    }
}
 
 
 
 
 
 
 
function checkPassword(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (txt.length > 3 && txt.length < 8) {
        fieldset.className = "kindagood";
    } else if (txt.length > 7) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}
 
 
function checkEmail(whatYouTyped) {
    var fieldset = whatYouTyped.parentNode;
    var txt = whatYouTyped.value;
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
        fieldset.className = "welldone";
    } else {
        fieldset.className = "";
    }
}
 
 
 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
 
 
function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}
addLoadEvent(prepareInputsForHints);
 
</script>

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
<style type="text/css">
form {
    width:500px;
    border:1px solid #ccc;
}
fieldset {
    border:0;
    padding:10px;
    margin:10px;
    position:relative;
}
label {
    display:block;
    font:normal 12px/17px verdana;
}
input {width:160px;}
 
 
span.hint {
    font:normal 11px/14px verdana;
    background:#eee url(bg-span-hint-gray.gif) no-repeat top left;
    color:#444;
    border:1px solid #888;
    padding:5px 5px 5px 40px;
    width:250px;
    position:absolute;
    margin: -12px 0 0 14px;
    display:none;
}
 
 
fieldset.welldone span.hint {
    background:#9fd680 url(bg-span-hint-welldone.jpg) no-repeat top left;
    border-color:#749e5c;
    color:#000;
}
fieldset.kindagood span.hint {
    background:#ffffcc url(bg-span-hint-kindagood.jpg) no-repeat top left;
    border-color:#cc9933;
}
 
 
fieldset.welldone {
    background:transparent url(bg-fieldset-welldone.gif) no-repeat 194px 19px;
}
fieldset.kindagood {
    background:transparent url(bg-fieldset-kindagood.gif) no-repeat 194px 19px;
}
 
 
</style>

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
<form action="test.php" name="basicform" id="basicform" >
 
 
<fieldset>
    <label for="username">Введите логин:</label>
    <input type="text" id="username" onkeyup="checkUsernameForLength(this);" />
    <span class="hint">Имя пользователя должно быть не менее 6 символов.</span>
</fieldset>
 
 
 
 
<fieldset>
    <label for="password">Введите пароль:</label>
    <input type="password" id="password" onkeyup="checkPassword(this);" />
    <span class="hint">Пароль может содержать любое сочетание символов, и должен быть не менее 4 символов. Рекомендованно  8 символов!</span>
</fieldset>
 
 
 
 
<fieldset>
    <label for="email">Введите ваш email адрес:</label>
    <input type="text" id="email" onkeyup="checkEmail(this);" />
    <span class="hint">Введите свой настоящий email адрес!<br/><br/></span>
</fieldset>
 
 
 
<fieldset>
  <input type="submit" value="Отправить"> 
</fieldset>
 
</form>

Подскажите пожалуйста как сделать, что бы

HTML5
1
2
3
<fieldset>
  <input type="submit" value="Отправить"> 
</fieldset>

появлялось только в том случае, если логин ввден верно (6 и больше символов)
пароль 4 и больше символов
и email введен верно

@chezz · 20.12.2009, 23:11

очень классная форма.
По теме.. Кажись это с помощью jQuery делается..

@nepster · 20.12.2009, 23:20 **[ТС]**

форма стремная какаето, но она уже проверяет после нажатия кнопки...

И все же как заставить кнопку появиться когда все верно?

@chezz · 21.12.2009, 00:12

Там стили 5 мин подправить)

@nepster · 21.12.2009, 11:26 **[ТС]**

я думаю в стилях css это нельзя сделать... Так как нужно что бы кнопка отправки формы появилась в том случае, если условия соблюдены... Нужно наверно в js проверку поставить, но к сожалению я не знаю как =(

@chezz · 21.12.2009, 14:43

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

я думаю в стилях css это нельзя сделать... Так как нужно что бы кнопка отправки формы появилась в том случае, если условия соблюдены... Нужно наверно в js проверку поставить, но к сожалению я не знаю как =(

В CSS это невозможно. Вы просто говорите что та форма стремная..
По теме..
jQuery этим занимается..масса примеров есть в интернете.

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@chezz zzloй гений! 28 / 28 / 2 Регистрация: 13.09.2009 Сообщений: 218
	20.12.2009, 23:11
	очень классная форма. По теме.. Кажись это с помощью jQuery делается.. 1

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	20.12.2009, 23:20 [ТС]
	форма стремная какаето, но она уже проверяет после нажатия кнопки... И все же как заставить кнопку появиться когда все верно? 0

@chezz zzloй гений! 28 / 28 / 2 Регистрация: 13.09.2009 Сообщений: 218
	21.12.2009, 00:12
	Там стили 5 мин подправить) 0

@nepster 61 / 61 / 11 Регистрация: 19.09.2009 Сообщений: 844
	21.12.2009, 11:26 [ТС]
	я думаю в стилях css это нельзя сделать... Так как нужно что бы кнопка отправки формы появилась в том случае, если условия соблюдены... Нужно наверно в js проверку поставить, но к сожалению я не знаю как =( 0

Опции темы